Question

I’m using this code…

<div id="app">
    <div id="app-actionbar">
        topbar
    </div>
    <div id="app-userinfo">
        sidebar
    </div>
    <div id="app-content">
        content
    </div>
</div>

/** Styling **/

#app {
    border:1px solid #666;
}

#app-actionbar {
    color: #333;
    width: 900px;
    float: left;
    height: 45px;
    background: #D9D9DC;
    margin-top:10px;
}

#app-content { 
    float: left;
    color: #333;
    background: #FFFFFF;
    height: 350px;
    width: 725px;
    display: inline;
}

#app-userinfo { 
    color: #333;
    background:#F2F2F2;
    height: 350px;
    width: 175px;
    float: left;
}

However, it’s not working like I want it to.

I want to add a border around it, but its not working (and its moving the content down).

Answer 1

You need to clear the floated elements in your #app . Try adding overflow:hidden; or overflow:auto; to #app. That will get the border to wrap you entire DIV.

Here’s a live jsfiddle link of your above snippets with the overflow:hidden assigned:
http://jsfiddle.net/AhZAU/

The spacing at the top, “(and its moving the content down)”, is being created by the margin-top:10px on the #app-actionbar. Remove the margin and the space will no longer be present: http://jsfiddle.net/AhZAU/1/