CSS/HTML Layout Help

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: lef开发者_Go百科t;
    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).

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/

The QuirksMode Way©:

#app {
    border:1px solid #666;
    overflow: auto;
    width: 100%;
}

http://jsfiddle.net/CePt6/

From the article:

If you want to add, say, a border around all floats (ie. a border around the container)...

NOTE

As far as the gap at the top, you can eliminate that by removing margin-top: 10px; from #app-actionbar.

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

http://jsfiddle.net/CePt6/2/

EDIT

Now, if you mean the content block is moving down, make the width of the #app the same width as your #app-actionbar:

#app {
    border:1px solid #666;
    overflow: auto;
    width: 900px;
}

http://jsfiddle.net/CePt6/3/

Just for giggles, tried that but with some layout changes. Check if it helps. (demo here)

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

CSS:

#app {
    border:1px solid #666;
    clear:both;
    position:absolute;
}

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

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

    left:200px;
    top:75px;
}

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

}

this should do the trick. jsfiddle.net demo

#app {
border:1px solid #666;
height: auto;
overflow: auto;
width: 900px;
}

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

#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;
clear: left;
}

Here's what you can do:

Add the following lines to your #app div like this:

width:900px;
min-height: 300px;
overflow:auto;

The above is meant to auto-expand the outer div as the inner contents increase in length.

This however will be a restriction on older versions of IE since they did not have the min-height property.