CSS simple responsive design - css

Question

im trying to build 3 divs. "left" "Center" and Right" all float to left. The "left" and "Right" div is fix in width (like side bars). The "center" div (content) is either auto or %.
When i re size my browser, In the case of (eg center div 60%), the right div is pushed to a lower position. If i use (eg center div auto) I get "left" div in place, "center" div takes all remaining space and the "right" div below.
What I need is, "left" and "right" div fix dimension 250px. The "Center" one fills the remaining space between the "left and right" div. And on resize only the "center div" width changes to fit.
(Note: Of course im using media query) This stuff will be helpful to me from 750px to 950px.)
<style type="text/css">
#left {
float:left;
height: 200px;
width: 250px;
border: medium dashed #03F;
}
#center {
float:left;
height: 200px;
width: 60%;
border: medium solid #C00;
}
#right {
float:left;
height: 200px;
width: 250px;
border: medium dashed #0C6;
}
</style>
<div id="left">
</div>
<div id="center">
</div>
<div id="right">
</div>

Answer 1

Check this: http://jsfiddle.net/87enE/
Create a wrapper and use display:table;. Then use dislay: table-cell for child elements:
HTML:
<div id="wrapper">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
CSS:
#wrapper{
width: 100%;
display: table;
}
#left {
display: table-cell;
height: 200px;
width: 250px;
border: medium dashed #03F;
}
#center {
display: table-cell;
height: 200px;
border: medium solid #C00;
}
#right {
display: table-cell;
height: 200px;
width: 250px;
border: medium dashed #0C6;
}
For responsive concern, better use percentage instead of fixed width:
Fiddle: http://jsfiddle.net/87enE/3/

Answer 2

You should put all div under table tr td and give first and last td to fix size you want(in %) and center to 100%.
Try this:
<style type="text/css">
#left {
float:left;
height: 200px;
width: 100%;
border: medium dashed #03F;
}
#center {
float:left;
height: 200px;
width: 100%;
border: medium solid #C00;
}
#right {
float:left;
height: 200px;
width: 100%;
border: medium dashed #0C6;
}
</style>
<table style="width:100%;">
<tr>
<td style="width:20%;">
<div id="left">
</div>
</td>
<td style="width:60%;">
<div id="center">
</div>
</td>
<td style="width:20%;">
<div id="right">
</div>
</td>
</table>
here is a demo
Note: If you wish to keep it responsive, you need to give all width in % instead of px. Also you can get more details about about media queries here
It should help you!
Thanks.

Answer 3

In cases such as this, I believe FlexBox handles the situation the best. #center's width will change to take up the remaining space.
<style>
#container {
display:flex;
flex-flow: row nowrap;
}
#left {
height: 200px;
width: 250px;
order:0;
border: medium dashed #03F;
}
#center {
flex:1;
order:1;
height: 200px;
border: medium solid #C00;
}
#right {
height: 200px;
width: 250px;
order:2;
border: medium dashed #0C6;
}
</style>

Answer 4

You can try this:
Fiddle Here:
<div id="wrapper" class="clearfix">
<div class="div" id="left">
</div>
<div class="div" id="center">
</div>
<div class="div" id="right">
</div>
</div>
Good Luck..