[css-d] consistent css layout

[Paulo Nobre]

Hi, i'm trying to get this layout to work with css for weeks without
100% success..

the layout is +- like this:

+--------++---------------------------------------+
|          | |                                        |
|   left   | |  Header                            |
|          | +---------------------------------------+
|          | +-----------------------------+--------+
|          | |                               |         |
|          | |     Content               |Right |
|          | |                               |         |
|          | |                               |         |
|          | |                               |         |
|          | |                               |         |
|          | |                               |         |
+--------++------------------------------+-------+
+---------------------------------------------------+
| Footer                                           |
+---------------------------------------------------+

left column: fixed width;
right color: fixed width;
header: fixed height;
footer: fixed height;

the content/header/footer width, will expand/shrink (with a min width
constraint);
left/content/right height will expand/shrink to fit content (being all
the same height);

my last aproach, works nice in ie7/ff (with some js to get the columns
at the same height). however in IE6, if the width come below the min,
the content is pulled down and its all a mess.

this is what i have until now:
markup:

<div id="pageContainer">
        <div id="header"></div>
        <div id="left"></div>
        <div id="contentContainer">
                <div id="right"></div>
                <div id="center"></div>
        </div>
        <div id="footerContainer"></div>
</div>

css:
html,body {
        margin: 0;
        padding: 0;
        background-color: White;
        font-size: 100%;
}

#pageContainer {
        margin: 0;
        min-width: 987px;
}

#header {
        margin: 5px 5px 0 200px;
        height: 100px;
        border: 1px solid black;
        border-bottom: none;
}

#left {
        margin: 5px;
        margin-top: -101px;
        width: 190px;
        float: left;
}

#contentContainer {
        margin-left: 200px;
        margin-right: 5px;
        border: 1px solid black;
        border-top: none;
}

#right {
        width: 200px;
        float: right;
}

#center {
        margin-right: 200px;
        padding: 0 10px;
}

#footer {
        height: 70px;
        clear: both;
}

can anybody help with this ?

thanks a lot,
pn
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/