I have a wrapper that is centered at 80% width, and contains a navigation div and a text div, with the nav div is at 25% width and floated left, and the text is at 75% width and floated right.
I had 2 surprises…first, when my browser window is maximized, there is a gap between the two divs. As I reduce the width of my browser, the gap closes and finally disappears.
Secondly, the background color of the wrapper, which is the same as the background color of the two divs is not showing, so the body background is what is seen in the gap.
The background of the wrapper isn’t showing because both child elements are floated. Floated boxes don’t normally affect their parent container. There are a number of ways to make that happen. One is to insert an empty non-floating element after the floats and give it clear:both. Another way is to specify overflow:hidden on the wrapper.
I can’t say anything about the gap without seeing the relevant markup and CSS.
I wouldn’t float one element left and one right, though. I’d float both to the left.
“The background of the wrapper isn’t showing because both child elements are floated. Floated boxes don’t normally affect their parent container.”
I am not sure what you mean by this. I was thinking that because both child elements were “inside” the parent wrapper, the wrapper would be as big to contain them…though as I type this I am realizing this is probably what you meant by affecting their parent container.
I will try the clear both suggestion. Thanks so much!
I thought if I used float left on both of them, they would stack under one another…but I did not try it. Thanks for the suggestion!
I have it online at the “test” link at spidress dot com.
The parent container normally expands vertically so that it contains all its child elements, but only as long as they are ‘in the normal flow’. Child elements that are floated or absolutely positioned are taken out of the normal flow and will not affect the dimensions of their parent.
By floating the parent, setting overflow:hidden, or adding a cleared element after the floats, you can make the parent expand to contain floated children. (There’s no way to do it for absolutely positioned children, though.)
No, if you float two elements to the left, and their combined width is less than the parent’s width, they’ll end up side by side. The second one will only drop below the first one if there isn’t room for it.
I found why you get the gap between your ‘columns’, too. It’s because the background image you use for the left-hand column is only 200px wide. So as soon as the width of the browser window exceeds 1000px, there will be a gap. I would recommend that you specify a background colour along with the image, where the colour is the same as the one at the right of the image. Or you could make the image wider (something like 500px, at least).
You have a lot of empty paragraphs in the left-hand column, which is very odd and also semantically incorrect. If you want white-space between elements, add margins with CSS, don’t insert empty HTML elements!