Question

I have a container in which I’m putting a bunch of elements, and my expectation was that the container would expand downward as the container filled with elements. Unfortunately, this is not the case. I have some div’s that are floating over the edge of my container. I was able to remedy this with a bunch of break tags, but this was a sloppy solution.

Perhaps my CSS is incorrect, but I can’t figure out where. The long select list and the major description should reside in the upper, white box.

Here’s a Fiddle.

EDIT: Uwe led me to research floats. I’ve discovered that floats are not considered in the normal flow layout. So how is this fixable?

EDIT 2: I found a clearfix solution.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
} /* Hides from IE-mac \*/
    .clearfix {
        display: block;
}

Answer 1

There are many ways to clear floats; simply appending overflow: hidden; to .main will solve your problem.

In practice though, it’s probably better to directly clear the floats which are causing the problems rather than applying a fix to the parent div. I would actually recommend appending the following properties to .bottom instead:

.bottom {
    clear: both;
    overflow: hidden;
}

• clear: both takes care of clearing the floats in .content.
• overflow: hidden takes care of clearing the floats in .bottom

You should also look into using the id attribute in addition to the class attribute for your HTML tags.