Problem with a simple template on CSS


I'm learning how to make a simple template with CSS e HTML5 but i've got a problem: i want to make a container with sidebar and articles list but it dosen't work. See to believe:

That black line, should be a simple border that contains both the elements. Thanks for help and sorry for bad english, Federico

Problem courtesy of: Federico Ponzi


It looks like you have an extraneous </div>, which is one problem :) It's removed in the fiddle below.

If you're using floating elements, which you are, you will need to clear those floats in order for the container to 'stretch' to the bottom of the content.

An easy way to do that is create a new class called "clear" or something similar with the following:

.clear {

However, the downside is that you're introducing a new dom element simply to modify the layout.

Another solution (courtesy of Quirksmode is to tell the containing element to deal with these floated elements:

#container {
    ....old code...
    overflow: auto;
    width: 100%;

This has a few quirks under certain circumstances, so it's up to you which you choose to use.

See the fiddle here:

This uses the clear element method.

Solution courtesy of: Gilman


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.