Question

I have a simple css layout

wrapper
header
left-sidebar / main-content / right-sidebar
footer

but my main content seems to drop (float drop) and I don’t understand why.

I have set it up in a fiddle – fiddle

I can get it to not drop by removing the float:left from the main-content div but I don’t understand why this is so. The container (wrapper) has a float:left and I thought this was the way to avoid the ‘float drop’

I am float:left on the left-sidebar and wrapper so I thought the main-content would just simply line up with the left-sidebar if I set float:left on the main-content div

Answer 1

The #main-content div needs a proper measurement value.

#main-content
{
margin-left: 110px;
margin-right: 110px;
float:left;
padding-bottom:150px;
width:500px;
}