The wrapper will only wrap around the header. If I delete, say, #center from the CSS, the wrapper will wrap around everything except #right. If I delete #right, it will wrap around everything. Altering the HTML doesn't change anything. This is completely random behavior that I have never encountered before.

 

#wrapper {
 width: 1000px;
 border: 1px solid #000000;
 }
#header {
 width: 100%;
 }
#left {
 width: 200px;
 float: left;
 }
#center {
 width: 500px;
 float: left;
 }
#right {
 width: 200px;
 float: left;
 }

<div id="wrapper">
 <div id="header"><p>header</p></div>
 <div id="left"><p>left</p></div>
 <div id="center"><p>center</p></div>
 <div id="right"><p>right</p></div>
</div>

It's expected behaviour - you're not clearing your floats before you close the wrapper.

 

Add this to your CSS:

 

.clearer { height:0px; clear:both; line-height:0px; overflow:hidden; font-size:0; }

 

And add this just before you close the wrapper div:

 

<div class="clearer"> </div>

So in other words the page needs a footer. It works, but is this really expected behavior? It seems very unnecessary and counter-intuitive.

Well, the page can either have or not have a footer - but a containing div won't expand around floats unless there's a clear to push it down. It's the way HTML is designed...

If you have a footer then you would place the clear in the footer. The problem with wrappers and floats is that if your floats don't have set heights and you are just allowing them to auto fit the wrapper doesn't know how big to be and it doesn't latch onto the bottom of the float, it is a big problem.

 

The way I do now, is rather than using an empty div (which you shouldn't do anyway as it is seen as bad practice...although I am very guilty of using empty divs ) is I set a clear to a break.

 

So you can either do this with inline styling like this:

<br style="clear: both;" />

 

I know I know, inline styling bad but its sometimes ok to break a rule when all you are doing with a class is using it once to clear something at the bottom....well thats my opinion.

 

Or you can set it as a class and have it

 

<br class="clear" />

 

 

both those will validate to strict, and it saves on creating an empty div.

That's quite a neat way of doing it Dizi.

 

I use my empy div (even though I know purists don't like it... like you I think it's OK to break a rule sometimes) because it's the one way I know that is guaranteed to have zero height in all browsers, and also allows me to put any content after my floated areas, even if it's imported content that I have no control over and can't apply a clear to.

 

I guess I could use a span and add display:block

yeah there is loads of ways you can set a clear in motion. I just use the break if there is going to be nothing else on the page, as if there is something else under it I would either add the clear into the next divs attributes or if that is not possible use then do as you do and use an empty div.