Question

jsfiddle: http://jsfiddle.net/Joshi3s/2gMWf/1/

I’m trying to wrap the entire container in a 1px solid border… but it only wraps around the header and nav.

I feel like a float is an issue but I’m not sure.

Can anyone help me understand what I need to do differently? Any other criticisms are also welcome.

P.S. I’m learning and trying to convert .PSD’s to HTML, with tutorials that I find on the internet. This is one that I found.

Answer 1

Add overflow: hidden to your #container definition:

#container {
    width: 1000px;
    margin: 0 auto;
    border: 1px solid black;
    overflow: hidden;
}

Floated elements are removed from the normal flow of block level elements on the page, so and adding the overflow attribute makes the height of the parent include the children as if they weren’t floated.