Question

I have the following (jsfiddle):

<div class="content_wrap">
    <div class="left_container">
    </div>

    <div class="right_container">
        <div style="background-color: blue; margin:20px; height: 1500px;"></div>
    </div>

    <div class="clearfix"></div>
</div>

</body>
</html>

CSS:

body,html {
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;
}

div.content_wrap {
    width: 100%;
    height: 100%;
}

div.left_container {
    float:left;
    width: 220px;
    height: 100%;
    background-color: red;
}

div.right_container {
    position: relative;
    padding: 15px;
    padding-top: 100px;
    width: 1000px;
}

.clear { clear: both; }

​What I’m trying to do is line the divs side by side and have the left side bar (red) stretch to either the height of the page, or the height taken up by the content (which is in blue), which ever is greater (like the layout shown here)

My problems at the moment are:
The content of the right container (The blue box is just to illustrate content) does not align properly next to the left container
The left container doesn’t adjust its height according to the content of the right container.

I’ve put in a clear fix, although to be quite honest, I don’t completely understand how that works.

Would appreciate some guidance.

Answer 1

See this demo: http://jsfiddle.net/PaJ3r/9/
Here is updated CSS for it:

body,html {
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;
}

div.content_wrap {
    width: 100%;
    position: relative;
}

div.left_container {
    float:left;
    position:absolute;
    width: 220px;
    height: 100%;
    background-color: red;
}

div.right_container {
    position: relative;
    padding: 15px;
    margin-left: 220px;
    padding-top:100px;
    width: 1000px;
}

.clear { clear: both; }

position:relative in div.content_wrap is needed in order to get left sidebar stretched to the height of content.
position:absolute; in div.left_container allows left container to fit height of wrapper div.
In div.right_container there is margin-left: 220px; which leave left sidebar visible