Question

I haven’t actually coded a website in a few years, so I’m pretty rusty. What I’m trying to do is create a fixed-width and full-height sidebar and a fluid content area. (See visual mockup: http://i54.tinypic.com/2m2b445.png)

I ran across faux columns, and they seem to be doing most of the trick. The only thing the technique isn’t doing (and I can’t figure out how to make it do) is a full-height sidebar.

Here’s the CSS and HTML that I’m using:

html,body {
    height: 100%;
}
#page-container {
    min-height: 100%;
    margin: 0;
    position: relative;
}
* html #page-container {
    height: 100%;
}
#inner-container:after {
    content: " ";
    display: block;
    clear: both;
}
#left-col {
    float: left;
    width: 250px;
    background-color: #F3F3F3;
}
#right-col {
    position: relative;
    margin-left: 250px;
}

HTML:

<div id="page-container">
    <div id="inner-container">
        <div id="left-col">
            <ul>
                <li>Lorem Ipsum</li>
                <li>Dolar Sit Amet</li>
                <li>Consectetur</li>
                <li>Adipiscing</li>
                <li>Elit Integer</li>
            </ul>
        </div>
        <div id="right-col">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        </div>
    </div>
</div>

How can I make the left column full-height? Should I be using a different column technique?

Answer 1

You could position the sidebar absolutely and give the content area the equivalent margin-left:

<style>
*, html {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
position: relative;
}

/* i would use conditional stylesheets for IE fixes instead */
* html div.column {
height: 100%;
}

div.column {
min-height: 100%;
}
div#content {
margin-left: 250px;
background-color: #FFFF99;
}
div#sidebar {
position: absolute;
top: 0;
left: 0;
width: 250px;
background-color: #99FFFF;
}
</style>

HTML:

<div id="content" class="column">
content
</div>
<div id="sidebar" class="column">
sidebar
</div>

Edit: One major benefit of this technique is that you can put the content markup above the navigation etc in the page source – a pretty good SEO practice.