How do I get a 100% height in CSS?

Question

Hello. I'm trying to create a layout for my website and I'm stuck with this.

I have a div layer, container, and inside it, two layers: content and sidebar.

These divs don't have fixed height. I would like to make both of the inner divs to have the same height (variable).

My current CSS is:

/* ========== RESET ========== */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

/* ========== GENERAL ========== */

html, body {
    background:#222;
    color:#d0cac1;
    font-family:Verdana, sans-serif;
    font-size:12px;
}

#header {
    background:#033;
}

    #header h1 {  
     text-indent:-9999px;
     margin:0 auto;
     background-image:url("http://www.google.com.br/intl/pt-BR_br/images/logo.gif"); /* TESTING ... */
     width:276px;
     height:110px;
    }

#container {
    width:800px;
    margin:0 auto;
    height:100%;
}

#content {
    width:400px;
    float:left;

    -moz-border-radius: 30px 30px 0 0;
    -webkit-border-radius: 30px 30px 0 0;
    border-radius: 30px 30px 0 0;

    background:#721415;
    padding:30px;
    margin:30px 30px 0 0;
}

.post {
}

#sidebar {
    padding:30px;
    width:250px;

    -moz-border-radius: 30px 30px 0 0;
    -webkit-border-radius: 30px 30px 0 0;
    border-radius: 30px 30px 0 0;

    background:#721415;
    margin-top:30px;
    float:right;

}

#footer {
    clear:both;
    background:#721415;
}

Thanks is advance.

EDIT: My demo is here: www.gabrielbianconi.com

Answer 1

Here is a step by step tutorial to achieve this.

It will show you how to use float and clear that can be tricky ;)

Answer 2

Something like:

<style>
  #sidebar{width:170px; float:left;}
  #content{width:900px; float:left;}
  #container{width:1070px; margin:auto;}
</style>

<div id="container">
  <div id="sidebar">Some sort of menu...</div>
  <div id="content">Hitch hikers guide to the galaxy is 
    the greatest book ever
</div>
<div style="clear:both"></div>
<!-- probablyPutaFooterHere -->

Good luck fella

Answer 3

There is no such thing in HTML as "layers". Using that term only causes confusion in relation to other terms so stop doing that.

There are several ways to do this including the popular "faux columns" method, which I despise. The other methods can be found by googling for "equal height columns". There you will find both CSS and javascript solutions and you can narrow it down to about two acceptable methods.