Question

My wrapper div is not expanding in height by it’s content. On the other hand, it expands by the header div on the page, and the nav div, but not by the sidebar which lies inside another div. Here is the HTML:

<div id="wrapper">
    <div id="header">
    </div>
    <div id="nav">
        nav content goes here
    </div>
    <div id="pagecontent">
    <div id="sidebar">
        some sidebar stuff like login form
    </div>
    </div>
</div>

and the CSS (only the necessary css, not like webkit box shadows):

#wrapper {
    width: 900px;
    margin: 0 auto;
    padding-bottom: 80px;
}
#header {
    height: 160px;
    width: 100%;
}
#nav {
    width: 100%;
    height: 40px;
}
#sidebar {
    float: right;
    width: 140px;
    height: 100%;
}
#pagecontent {
    width: 900px;
}

the sidebar, which has height 100%, goes outside the wrapper div, you could look at it on http://craftersinn.net

Answer 1

You’ve missed to add css rule overflow:hidden in #wrapper css.