Problem with a simple template on CSS

Problem

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: http://informaticalab.com/template.html

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

Solution

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 {
    clear:both;
}

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

Another solution (courtesy of Quirksmode http://www.quirksmode.org/css/clearing.html) 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: http://jsfiddle.net/callseng/kZB5j/

This uses the clear element method.

Solution courtesy of: Gilman

Discussion

There is currently no discussion for this recipe.

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