Why are these divs not in my body?

I would like to have a border around the entire body of my web page. 开发者_开发知识库

I have created a layout that has a body with several div tags inside of it. I added CSS that I assumed would put a border around all content. Unfortunately the last two divs in my layout are, for some reason, being placed outside of the border.

This is the CSS I am using for the body:

    body
    {
        position:relative;
        top:5px;
        width:1024px;
        background-color: #f7f7f7;
        padding: 5px;
        border:1px solid #151515;
        margin:auto;
        font-family:Calibri;  
    }

I suspect that the reason the border is not displaying as I wish has nothing to do with this CSS. You can view the site here if you would like to see the complete CSS/HTML: http://sprocket-tools.com/

I won't bloat this post by including the verbose HTML/CSS. If you need more details on the HTML/CSS aspect please visit the link.

---

You have floated your DIVs, which causes the parent element to collapse. You need to have an element below them that clears, forcing the parent element to not behave this way.

<div style="height:0px; clear:both;"></div>

Put that above your </body>. That should do.

See this: http://css-tricks.com/all-about-floats/ Start with the section, "The Great Collapse"