You might try adding a float:left to the wrapper-
#wrapper {
background-color:#EEEEEE;
border:2px solid #000000;
padding:10px;
width:925px;
float:left;
}
It seems that when a containing div is also floated, the floated stuff inside it expands the parents bounds. I’m sure you could Google that for a more concise explanation.
Standard Disclaimer
I could be totally wrong.
-
☆ A M B ☆
- 24,524 Posts
You can also add an element to the bottom of the container with "clear: both" and it will force the container to expand. I know, that’s an extra unnecessary set of tags, but sometimes floating the container is not an option.
If you want to learn more about positioning and floats etc then read "CSS Mastery: Advanced Web Design Solutions" by Andy Budd. The best chapter is Chapter Seven...
Max
-
☆ A M B ☆
- 24,524 Posts
Or if you’re like me and too cheap to buy books, there’s
A List Apart and
Postion is Everything for some terrific articles and tutorials. Also
http://reference.sitepoint.com/css is a good bookmark to have.
-
MODX Staff
- 2,502 Posts
Quote from: sottwell at Mar 21, 2008, 12:23 PM
You can also add an element to the bottom of the container with "clear: both" and it will force the container to expand. I know, that’s an extra unnecessary set of tags, but sometimes floating the container is not an option.
I was going to recommend two methods including my old way and the
PIE Clearfix but guess what! There is a
Doh! solution for clearing floats that most CSS designers (myself included) have never tried at Sitepoint--it is so simple it makes you want to scream. AHHHHHHHHHHH!
This is the one I used to use which is to place an <hr /> element after the last float and then give it the following CSS style:
#container hr{
clear:both;
height:0;
visibility:hidden;
display:none;
}
Here is the "new" way from SitePoint:
#container {
overflow:auto;
}
How simple is that?
Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup
magician.
Blog ✦
Twitter ✦
LinkedIn ✦
GitHub
Even a simple <br clear="all" /> will clear floated content for you. Basically floats are considered outside the rest of the layout, and clearing them is like using carriage return on those old electric typewriters so that you can start fresh on the next line below. The rules for exactly how floated elements behave seem simple when you read them, but in practice I’ve found them to be rather unpredictable.
Like many designers, I used to float all sorts of layout elements because it seemed to be an almost magical solution for easily laying out a page. But now I try to only use floats where they’re needed (ul menus, etc.) and not for layout. I found that using absolute positioning avoids the float issues I kept seeing and makes search engine optimization easier (e.g., content before menus).
Floats in the layout seem to slow down page display as well. The browser has to calculate the dimensions and behavior of the contained content before it can render the float in its proper location, and especially on slow machines or connections this can make a noticeable difference in load time. Firefox in particular seems to sporadically panic during this process and just spit out a float as if there were a clear:both above it (for example dumping your floated right column content below the left one).
