[macgyvr64]

I'm working on what should be a simple CSS layout with two columns. I have a right sidebar and main content column. This is as about bare bones I could make the CSS.

#holder
{
width : 700px;
background: #d0d0d0;
}

#content
{
float: left;
width: 460px;
padding: 10px;
clear: none;
}

#sidebar
{
width: 200px;
margin-left: 480px;
padding: 10px;
background: #d9d9d9;
}


And my HTML is effectively:

<div id="holder">
<div id="content">add a bunch of text here</div>
<div id="sidebar"></div>
</div>


However, when there is more text in #content than in #sidebar, it overflows outside #holder. Is there a way to get #holder to respect it's contents, despite my floating something inside?

Hopefully that came out okay..been messing with this ridiculous bug for hours. It's stuff like this that reallllly makes me want to go back to using tables for layout.

[registered_user]

#holder {
overflow: auto;
}

If, that is, I understand your problem correctly.

edit, I mean #holder not #content.

[Millennium]

Believe it or not, this is actually the way CSS is supposed to work. If you have stuff outside of the container, it will be pushed up as far as it can, but will still respect the floating object. There are actually good reasons for this -it makes some kinds of layouts possible that wouldn't otherwise be- but it is very annoying for other kinds of layouts.

The most common way of dealing with this is to put a div with clear:both as the last item in a box that has floaters in it. If you don't care about IE (or you're using the IE7 JavaScript routines), you can even do this entirely in CSS and not touch your HTML at all. In your case, that CSS would look something like this:

Code:
#holder:after {
display: block;
height: 1px;
clear: both;
}

If you don't want to take this route, however, then the HTML change would look like this:

Code:
<div id="holder">
<div id="content">add a bunch of text here</div>
<div id="sidebar"></div>
<div style="clear:both;height:1px;"></div>
</div>

Some people even turn this "clearing div" into a design element in its own right, by giving it a background or some content. Done this way, it blends in with the page seamlessly.

[macgyvr64]

Even with that div, some pages still aren't working properly. If you could take a look at this, it would be very much appreciated.

I just pointed :80 at this machine, heheh

http://68.46.142.101/wordpress/
it's particularly visible when you click on Uncategorized to show those posts.
And comments, too

[registered_user]

uncomment the overflow: auto; and add clear:both; to the footer and I think that solves it. It sure does in Firefox.

while the spacer div hack tricks the validator and has it's uses, it's still a hack, and not a pretty one. overflow is spec'ed into CSS to do what you're looking for.

[macgyvr64]

Excellent! Thanks..works in Safari too.