I have an example of absolute positioned div which is centered in the page:
HTML
<div id="test1"><img src="http://www.interactivepixel.net/images/i01.jpg" width="500" height="333"/></div>
CSS
#test1{
position:absolute;
top:50%;
left:50%;
width:500px;
height:333px;
margin-top:-166px;
margin-left:-250px;
}
http://jsfiddle.net/ktFuN/
This works well until I shrink browser window so much that I get scrollbars and then even with the use of scrollbar I am loosing left and top side of the image, I cannot scroll all the way left and top of the image, like the centering doesn't work any more.
Why is that?
when you reduce your window size, only the body size gets reduced, not that of the image or the explicitly sized div#test1. lets say the body size becomes 450x300 (width x height), ie less than the div size 500 x 333.
Apply the CSS top and left rules to the div
left of your div calculates to (50% of 450) = 225
top of your div calculates to (50% of 300) = 150
So your div now starts from point (225, 150) ie (left, top)
Now apply CSS negative margins to your div
ie -250 to left and -166 to top
ie you div's position now becomes (225-250, 150-166) ie (-25, -16) absolute position.
Which means whenever you reduce you window size to be lesser than your absolutely positioned div size, some parts of your div would not be viewable, since body starts at (0, 0)
And since you've given that div negative margin for top and left, read this to understand how the div went out of view: http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
You could check this thread for some generic css based solutions for centering an element.
Related
I have a with an image inside it can not be in the background of the div css. It is 3000px wide, the div must occupy 100% of the resolution of the user and need to focus the image.
Now it is painted correctly cut the image inside the div to 100% width * height 504px. However, I need to focus the image, because now comes attached to the left and above the div.
How I can make the image is centered? It can not be by CSS background or negative margins because the resolution of each user is different and not for a fixed width is just 100%.
Use this in your css style,
It may be useful to you
display:block;
margin:0 auto;
I have a css code that has a float property. When i resize the window of my browser, the menus of my webpage are moving down. I already comment-out the float properties, but nothing's changed. What should I do to make it fixed that it will not move down even though I resize my browser?
float got nothing to do with the floating of the div's when the window is resized.
It just ask the div to be aligned to the left,right only if there is space,
what i think you should do is to make wrapper div ID called "content" like this below and add all your inside div elements there,
#content{
width:960px;
margin:0px auto;
}
now inside this div content, if you have 2 div's width 400px and 400px if you set their property to float left they align left, if you set it float right they align right..
if there is no space, like if one div is 400px and other one is 600px even if the property is set to float left they will come as vertical dives as combined width is more than container div
learn more about fix width css design
I have a background image that's centered vertically and horizontally using CSS. It looks great and is working as long as the window is large enough to display the background image.
The problem I have occurs when the window is resized to be smaller than the bg image. When this happens, the bg image continues to be centered, but I instead need to maintain a minimum margin around the top and left of the bg image. The BG image is 900px x 700px, and the code I've used is:
#main_wrapper {
background-image: url(../images/background.jpg);
position:relative;
width:900px;
height:700px;
left:50%;
top:50%;
margin-left:-450px;
margin-top:-350px;
}
Any solution would need to continue to center the bg image horizontally and vertically when the window is large enough to allow it, but would have a minimum margin at the top when the window is shorter than the bg image, and a minimum margin at the left when the window is narrower than the bg image. Any help would be greatly appreciated. Thanks.
If this is in your <body>, I'd add two extra divs right at the beginning of the body, positioned absolute, and having a background-color of white, to make sure that in that area, the background image isn't seen.
Then wrap the rest of what you had in the body in a <div> and have it be position: relative.
I think this should result in what you want.
I have two divs: one is floated left and the other right. The div on the right is a constant size, but I want the div on the left to change it's width according to the window size. I currently have the width set to 75%, which looks great at a certain size. However, when the window get's relatively large, the space in between the two divs becomes too large. How can I set the width of the div on the left so that it's distance from the div on the right is constant, regardless of window size?
Set the left-most div's width to 100% and give it a margin-right the same width as the right div. Then make the right div's position absolute and fix it to the top-right corner of the page.
You can set the left floating div to 100% and give it a margin as wide as the right floating div. That should work
Like this jsfiddle
I'm trying to have the following markup:
body
#container
#content
where body is full width and has a background snapping to the bottom right.
where container has a set width of 960px and min-width of 600px, located in the top left corner of the page.
where content has a set width of 600px and is also located in the top left corner of the page. with a margin "100px 0px 0px 100px"
When I try to do this, the body looks good with a background-attachment scroll positioned bottom right. However, when the browser is resized to a width of less then 960px (or any other width of the container element) the body stops at the width of the browser, leaking the subelements out.
I would like to have the body always be at least the width of the subelements, instead of it breaking. I have no elements floating, which could break up the page, so I don't see why it is behaving this way.
I've made a sort of solution over here:
jsFiddle
Put the min-width on the html element, not the body. Then if the viewport is too small, the background-image will move out of the viewport and is visible when you scroll.
Is this what you want?