CSS - Can this fluid layout be achieved? [duplicate] - html

Question

This question already has answers here:
3 columns, center column fixed, sides fill parents
(3 answers)
Closed 8 years ago.
So what I want to achieve here is to have the red box a fixed width say 400px that is horizontally centered on the page. Either side of the red box is a green box and a lilac box of variable width that fill out the rest of the window horizontally and stretch to fit the window size.
So on a larger monitor the green and lilac boxes would be stretched horizontally and the red box in the middle of the page would remain the same width.
The solution would need to work in IE 8 and above ideally although I'm interested in solution that only work in IE9 + too.

Answer 1

You can use calc to solve this:
HTML:
<div class="green"></div>
<div class="red"></div>
<div class="lilac"></div>
CSS:
html, body {
width: 100%
}
.green {
width: calc((100% - 400px)/2); //takes the total space, minus the red box space, divided by two.
height: 200px;
background: green;
float: left;
}
.red {
width: 400px;
height: 200px;
background: red;
float: left;
}
.lilac {
width: calc((100% - 400px)/2);
height: 200px;
background: lavender;
float: left;
}
Proof of concept: http://jsfiddle.net/yERs7/

Answer 2

You can use display: table and have full compatibility even with IE8, as you asked
Example on codepen: http://codepen.io/anon/pen/emCFy/
Markup:
<div>
<section style="background: #91ee93">
Green</section>
<section style="background: #ee8c8f" role="main">
Red</section>
<section style="background: #e48fec">
Pink</section>
</div>
Css
div {
display: table;
table-layout: fixed;
width: 100%;
}
section {
display: table-cell;
}
section[role] {
width: 400px;
}

Answer 3

I created this quick JSFiddle hack for you.
Basically we let those three divs float next to each other, give the middle one a fixed width and use this markup on the other two:
width:50%;
padding-left: 150px;
margin-left: -150px;
box-sizing: border-box;
and
width:50%;
padding-right: 150px;
margin-right: -150px;
box-sizing: border-box;
Where 150 equals half of the middle div's width.