CODEWITHSUNDEEP
csslayout
Gabriel Bianconi
Gabriel Bianconi

Reputation: 1189

How do I get a 100% height in CSS?

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

Upvotes: 2

Views: 406

Answers (3)

Rob
Rob

Reputation: 15160

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.

Upvotes: 0

Paul
Paul

Reputation: 5576

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

Upvotes: 0

nicoulaj
nicoulaj

Reputation: 3553

Here is a step by step tutorial to achieve this.

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

Upvotes: 1

Related Questions