Why my columns doesn't enlarge to the container height? - html

Question

I want the left and right columns enlarge to the center column height, but they doesn't expand and the layout is terrible.
I need a simple three columns layout but I don't want a fixed dimensions in pixels nor ems.
HTML code:
<div id="contenedor">
<div class="bloque" id="head">
Cabecera
</div>
<div class="bloque" id="left">
Bloque-2
</div>
<div id="contenido">
<div class="bloque" id="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut justo sed nisl commodo imperdiet vitae molestie orci. Cras urna sem, malesuada et feugiat sed, accumsan nec dolor. Vivamus hendrerit ante non urna bibendum, et tristique libero ultrices. Phasellus auctor tempor leo, quis pretium nisl posuere sit amet. Vestibulum eget erat dolor. Integer venenatis eu libero ac pharetra. Nullam nec ligula et quam bibendum semper. Phasellus ...
</div>
<div class="bloque" id="right">
Bloque-3
</div>
</div>
<div class="bloque" id="foot">
Pie
</div>
</div>
CSS code:
#contenedor {
background-color: #EEE;
width: 100%;
height: 100%;
}
.bloque {
background-color: #CCC;
}
#head {
width: 100%
height: 10%;
text-align: center;
}
#left {
width: 25%;
float: left;
min-height: 85%;
}
#right {
width: 20%;
float: left;
min-height: 85%;
}
#center {
width: 55%;
float: left;
background-color: #FFF;
}
#foot {
clear: both;
text-align: center;
min-height: 5%;
}
CSSDeck.com

Answer 1

I have updated your code and used a trick to get the result.
UPATED CODE

Answer 2

I hope that my answer will help you
HTML
<div id="container">
<div id="header">header</div>
<div id="nav">
<p>link 1</p>
<p>link 2</p>
<p>link 3</p>
</div>
<div id="aside">
<h3>text</h3>
<p>text2</p>
<p>text3</p>
<p>text4</p>
</div>
<div id="content">
<h2>head text</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe qui possimus maxime iste voluptates. Alias assumenda maiores voluptates unde minus rerum possimus velit itaque nesciunt explicabo perferendis at fugit facilis!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe qui possimus maxime iste voluptates. Alias assumenda maiores voluptates unde minus rerum possimus velit itaque nesciunt explicabo perferendis at fugit facilis!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe qui possimus maxime iste voluptates. Alias assumenda maiores voluptates unde minus rerum possimus velit itaque nesciunt explicabo perferendis at fugit facilis!</li>
</ul>
</div>
<div id="footer">© user</div>
</div>
DEMO

Answer 3

Just add in your css
html, body
{
height:100%;
}
and you you could set height of your div left and right in pourcentage at your own desire...
and
<div id="contenedor">
<div class="bloque" id="head">
Cabecera
</div>
<div class="bloque" id="left">
Bloque-2
</div>
<div id="contenido">
<div class="bloque" id="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut justo sed nisl commodo imperdiet vitae molestie orci. Cras urna sem, malesuada et feugiat sed, accumsan nec dolor. Vivamus hendrerit ante non urna bibendum, et tristique libero ultrices. Phasellus auctor tempor leo, quis pretium nisl posuere sit amet. Vestibulum eget erat dolor. Integer venenatis eu libero ac pharetra. Nullam nec ligula et quam bibendum semper. Phasellus ...
</div>
</div>
<div class="bloque" id="right">
Bloque-3
</div>
<div class="bloque" id="foot">
Pie
</div>
</div>