tags:

views:

20

answers:

1

I want to create a layout like this:

        |                      |
        |                      |
        |                      |
        |                      |
        |                      |
        |                      |
        |                      |
        |                      |
 -FIXED-|--------FLUID---------|
        |                      |
        |                      |
        |                      |
        |                      |
        |                      |
        |                      |
        |                      |

Just like http://www.php.net/

I have this:

div#sidebar {
    float: left;
    width: 200px;
    padding: 4px;

    background-color: #EEEEEE;
    border-right: dashed 1px #AAAAAA;
}

div#content {
    padding: 4px;

    margin-left: 208px;
}

But the problem is that the sidebar isn't at least the height of the content block (which it should be).

Can anyone help me? Thanks

Oh, one more thing: I will never, ever use a table for this!

+1  A: 

php.net's solution is to use a background image on the wrapper div. They have this markup:

<div id="layout_2">
    <div id="leftbar">
    <div id="content" class="manual/en">
    <div class="cleaner">
</div>

#layout_2 has this CSS:

background-image: url("http://static.php.net/www.php.net/images/leftbar.png");
background-position: 0% 0%;
background-repeat: repeat-y;
DisgruntledGoat
Thanks. I managed to do something similar, but instead using an image, using a 208px #EEEEEE border.
Time Machine