Div Acting Weird unless Floated Left

**JeremyEnglert** · Aug 9, 2012 19:40

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?

**ralph.m** · Aug 9, 2012 19:54

Remove float: left and add overflow: hidden;

Code:

#page {
text-align: left;
margin: 0px auto;
padding: 0;
width: 900px;
background: #FDFDFD;
overflow: hidden;
}

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/

**JeremyEnglert** · Aug 9, 2012 20:34

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!