How to make a dynamic layout only by CSS - html

Question

I want to create a layout like this:
The left column (yellow): width 150px constant - height dynamic
The middle column (azure): width dynamic - height dynamic
The right column (green): width 150px constant - height dynamic
The footer (red): width dynamic - height constant
I'm looking for a CSS-only solution.
jsFiddle here.

Answer 1

http://fiddle.jshell.net/2bSaP/show/
HTML :
<div id="container">
<div id="yellow"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>
</div>
CSS :
body {
margin: 0;
}
#yellow {
background: yellow;
position: absolute;
width: 150px;
top: 0;
left: 0;
bottom: 155px;
}
#blue {
background: rgb(98, 196, 255);
position: absolute;
top: 0;
right: 155px;
left: 155px;
bottom: 155px;
}
#green {
background: green;
position: absolute;
width: 150px;
top: 0;
right: 0;
bottom: 155px;
}
#red {
background: brown;
position: absolute;
height: 150px;
left: 0;
right: 0;
bottom: 0;
}

Answer 2

Used
now you forget position define position value in your css
as like this
#blue{
position: absolute;
}

Answer 3

Not sure if this is what you wanted, but I got rid of all those height rules for #Blue and just added height: 100%, then gave #Red a higher z-index (55, for instance).
Now the center square appears to always be blue.
http://jsfiddle.net/qXKZh/38/
Hope this helps

Answer 4

I'm really not sure what you're trying to accomplish. Is it supposed to look the way MusikAnimal's jsfiddle looks?
If so, I'd go for a different structure (complete with the right heights and widths...):
<div id="for3columns" style="height: 500px;">
<div id="yellow_column" style="float: left; width: 20%; height: 100%"></div>
<div id="blue_column" style="float: left; width: 60%; height: 100%"></div>
<div id="green_column" style="float: left; width: 20%; height: 100%"></div>
</div>
<div id="lower_red" style="clear:both; width: 100%; height: 100px;"></div>

Answer 5

It's a little difficult to understand what your question is, but from what I gather, I was able to get to this solution: Fiddle
HTML
<div class='container'>
<div class='col col-left'></div>
<div class='col col-mid'></div>
<div class='col col-right'></div>
<div class='col col-bottom'></div>
</div>​
CSS
.container {
width: 960px;
margin: 0 auto;
}
.col {
margin: 0;
padding: 0;
float: left;
}
.col-left {
width: 25%;
height: 200px;
background: #f90a7b;
}
.col-mid {
width: 50%;
height: 200px;
background: #e3f606;
}
.col-right {
width: 25%;
height: 200px;
background: #46c704;
}
.col-bottom {
width: 100%;
height: 200px;
background: #0654e0;
}​