Responsive CSS Approach - css

Question

The figure below is an illustration of what Im trying to get. The 1st figure represents the longer width and the 2nd figure represents the shorter width.
All the red blocks stays at the right and left position and the yellow block should follow the width of the container.
1: http://i.stack.imgur.com/6bHTo.jpg
heres my current approach
/* the one with black border :) */
.container{
position: relative;
}
/* red blocks have auto heights depends on its content */
.red{
position: absolute;
top: 0;
width: 100px;
}
.red-left{
left:0;
}
.red-right{
right:0;
}
/* yellow block follow the width of the container but should leave spaces for the left and right */
.yellow{
margin: 0 110px;
}
Im almost satisfied with this approach however, I noticed that when the red blocks are higher than the container, the container doesnt auto follow the height of its contents. I understand that its impossible to auto height the container because the children are in position absolute. :)

Answer 1

Have you consider using CSS3 Flex Box? It would go like this:
HTML:
<div class="container">
<div class="red red-left">red-left<br>red-left<br>red-left<br>red-left<br>red-left</div>
<div class="yellow">yellow<br>yellow</div>
<div class="red red-right">red-right</div>
</div>
And Css:
.container{
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: box;
box-orient: horizontal;
}
.red{
background-color:red;
width:100px;
}
.yellow{
background-color:yellow;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
​
​Check out this Fiddle:
http://jsfiddle.net/lucaslazaro/sjYNy/
EDIT:
To know more about Flex Box I recommend this quick tutorial: http://www.html5rocks.com/pt/tutorials/flexbox/quick/

Answer 2

Maybe that helps:
HTML
<div class="container">
<div class="red red-left">red-left<br>red-left<br>red-left</div>
<div class="yellow">yellow<br>yellow</div>
<div class="red red-right">red-right</div>
</div>
​
​
CSS
/* the one with black border :) */
.container{
position: relative;
}
/* red blocks have auto heights depends on its content */
.red{
position: absolute;
top: 0;
width: 100px;
background:red;
height:auto
}
.red-left{
left:0;
}
.red-right{
right:0;
}
/* yellow block follow the width of the container but should leave spaces for the left and right */
.yellow{
margin: 0 110px;
background:yellow
}
​
​
​​DEMO

Answer 3

My Own Demo to make it easier.
What we can see here is the content overlapsed the container.

Answer 4

Using:
div {
display: table;
width: 100%;
table-layout: fixed;
}
div > div {
display: table-cell;
}
Review full code:
http://jsfiddle.net/BF6La/