Div Acting Weird unless Floated Left

HTML & CSS
1

http://goo.gl/ZciQu

The #page div is supposed to be centered on the page, however when you remove the “float: left” from the div, it no longer auto-stretches in height. If you view it in Firebug, you will see that without the “float: left”, the #page div ends behind the slideshow instead of extending down.

Any ideas?

2

Remove float: left and add overflow: hidden;

#page {
text-align: left;
margin: 0px auto;
padding: 0;
width: 900px;
background: #FDFDFD;
[COLOR="#FF0000"]overflow: hidden;[/COLOR]
}

The problem is that a div does not automatically wrap around floated content. (By default, floated content hangs out of its container.) Using overflow: hidden is an easy way to force the container (in this case #page) to wrap around the contents.

Here’s a longer explanation: http://pageaffairs.com/web/css/containing-floats/

3

Ralph, has anyone told you you’re awesome lately?

I normally get rid of the sidebar on my themes, so I never had this issue before. Now it’s all making sense. Thanks man!

4

Ha ha, a few times, but my wife doesn’t believe me. :smiley:

Glad that helped.