How to fit elements in 100% width without absolute positioning? - html

Question

I'm trying to do a 4-frame design with css, as in this code:
http://jsfiddle.net/7qBKJ/1/
But I don't want to use position:absolute;, and I'm trying to do it like this:
topframe: block;
left,right and centerframes: inline-block;
And I want to ensure there is, say, 200px of width in both rightframe and leftframe, and the remaining parts should be filled by centerframe. How can I manage this without absolute positioning?
I tried this, but it moves the frames up and down, when the screen width decreases :
http://jsfiddle.net/V4vAc/2/
in this fiddle, centerframe aligns with leftframe, since they are both inline-block, with centerframe rule margin-left:0px; but I have no idea how to set centerframe's right to align with rightframe's left, without specifying a width.
So how can I make #centerframe's width equal to screen width - 400 px ?
Thanks !

Answer 1

What you have to do is to put both sidebars first in the flow of the document. Then you float the first sidebar right and the second one left.
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
/* main.css */
#left {
width: 200px;
height: 100px;
background-color: blue;
float: left;
}
#right {
width: 200px;
height: 100px;
background-color: red;
float: right;
}
#center {
width: auto;
height: 100px;
background-color: green;
margin: 0 200px;
}
http://jsfiddle.net/samgh/JjsFF/
If you want center to be the full width underneath the two sidebars, you can remove the margins. Hope this helps.