3 columns layout - fixed fluid fixed

[perry]

Hi,

I have a problem to create the layout like this http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/ but with few differences. The content column should have static width, for example 800px and left and right column should have the same width and should fit to the size of the browser window.

Is it possible to obtain such effect using css ?

Best regards

[Veronica]

It can be tricky. You might try something like this.

In the style:


body { margin-left:0px;
margin-top:0px;
margin-right:0px;
}
#top {
width: 100%;
height: 90px;
background: #FDE95E;
}
#content {
position: absolute;
left: 50%;
margin-left: -200px;
width: 400px;
background: #FF9966;
}
#wrapside1 {
float: left;
width: 50%;
}
#wrapside2 {
float: right;
width: 50%;
}
#side1 {
margin-right: 200px;
background: #EAEAEA;
}
#side2 {
margin-left: 200px;
background: #C8FC98;
}
#bottom {
width: 100%;
height: 90px;
background: #FDE95E;
}



In the body


<div id="top"></div>
<div id="container">
<div id="content">Center column with fixed width</div>
<div id="wrapside1">
<div id="side1">Side column with fluid size, but equal to that of other side</div>
</div>
<div id="wrapside2">
<div id="side2">Side column</div>
</div>
<div id="bottom"></div>

[perry]

It's working in FF but there is a problem with IE because right div sometimes goes lower than should be :( Can anyone fix it?