How to occupy all the space in a div when working with min-height header / footer

Posted by javacoder on Stack Overflow See other posts from Stack Overflow or by javacoder
Published on 2010-03-18T04:48:27Z Indexed on 2010/03/18 4:51 UTC
Read the original article Hit count: 341

Filed under:

css

|

css-layout

|

min-height

|

webdesign

I believe this is a beginner's CSS question. I am utilizing the method described in http://www.xs4all.nl/~peterned/examples/csslayout1.html to fix a header to the top and a footer to the bottom.

What I'd like to achieve now is two columns inside the content div. A left one of 200px and a right one that takes up the rest of the width.

Unfortunately, I can't get the left and right divs to display correctly: they just don't grow vertically, and if I make the right div "width: 100%" it positions itself underneath the left one.

What is the trick to make the left and right div take up all the space within the content div?

The layout1.css is the original one. I just added two entries: #left and #right

layout1.css:

/**
 * 100% height layout with header and footer
 * ----------------------------------------------
 * Feel free to copy/use/change/improve
 */
html,body {
    margin: 0;
    padding: 0;
    height: 100%; /* needed for container min-height */
    background: gray;
    font-family: arial, sans-serif;
    font-size: small;
    color: #666;
}

h1 {
    font: 1.5em georgia, serif;
    margin: 0.5em 0;
}

h2 {
    font: 1.25em georgia, serif;
    margin: 0 0 0.5em;
}

h1,h2,a {
    color: orange;
}

p {
    line-height: 1.5;
    margin: 0 0 1em;
}

div#container {
    position: relative; /* needed for footer positioning*/
    margin: 0 auto; /* center, not in IE5 */
    width: 750px;
    background: #f0f0f0;
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treaded as min-height*/
    min-height: 100%; /* real browsers */
}

div#header {
    padding: 1em;
    background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom: 6px double gray;
}

div#header p {
    font-style: italic;
    font-size: 1.1em;
    margin: 0;
}

div#content {
    padding: 1em 1em 5em; /* bottom padding for footer */
}

div#content p {
    text-align: justify;
    padding: 0 1em;
}

div#footer {
    position: absolute;
    width: 100%;
    bottom: 0; /* stick to bottom */
    background: #ddd;
    border-top: 6px double gray;
}

div#footer p {
    padding: 1em;
    margin: 0;
}

// added the following:

div#left {
   border: 1px solid red;
   width: 200px;
   float: left;
   min-height: 100%;
   height: 100%;
   padding-left: 10px;
   margin-right: 10px;
}

div#right {
   border: 1px solid blue;
   float: left;
   min-height: 100%;
   height: 100%;
   padding-left: 10px;
   margin-right: 10px;
}

layout.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Layout - 100% height</title>
    <link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>

    <div id="container">

        <div id="header">
            <h1>header</h1> 
        </div>

        <div id="content">
                   <div id="left">
                       left column
                   </div>
                   <div id="right">
                       right column
                   </div>
        </div>

        <div id="footer">
            <p>
                footer
            </p>
        </div>
    </div>
</body>

Developer IT