Home/ Questions/Q 3495038
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T12:04:42+00:00

I’ve been banging my head off this for nearly 3days now. I’ve read loads

  • 0

I’ve been banging my head off this for nearly 3days now. I’ve read loads of articles about 3col stretch, and seting clear and using position absolute and relative (many contradictory)

I want, what I consider, a very simple lay out. I want a navigation div on the left. Two divs on the left and a footer. If i was using tables it would be something like this:

<table border="1">
<tr> 
    <td rowspan="2">
        left nav.
    </td>
    <td>right 1</td>
</tr>
<tr>
    <td>right 2</td>
</tr>
<tr>
    <td colspan="2">footer</td>
</tr>

However I can’t get the left div to stretch all the way down. Below is the closest I’ve come to a solution. Which actually seems to work in ie7 but not in opera or firefox.

I believe this is caused by the float not expanding the length of the parent div, so the left div thinks it’s parent is smaller than it is.

Any help would be great.

    <html>
<head>
<style type="text/css">
body
{
height:100;
}



.main{
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    width: 100%;
}


.leftDiv
{

    position: relative;
    float: left;
    width: 18%;
    height: 100%;
    background-color: aqua;
}

.topRight
{
    position: relative;
    float: right;
    width: 80%;
    background-color: green;
}
.bottomRight
{
    position: relative;
    float: right;
    width: 80%;
    background-color: red;
}

.footer
{
    width: 100%;
    float: right;
    background: blue;
    position: relative;
}

</style>
</head>

<body>

<div class="main">

    <div class="leftDiv">This should Stretch all the way down the left side</div>
    <div class="topRight">This should be over to the right at the top</div>
    <div class="bottomRight">This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>This should be at the bottom right this is where the main content will go<br/>
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>
lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>lotst of text here<br/>
lotst of text here<br/> </div>

    <div class="footer">footer text.  This should be at the bottom of the screen under the main content.<br/></div>




</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I took the freedom of cleaning it up a bit. I also put your footer div outside of your main div.

    In this layout the content of the main div determines the height. I gave all the content a left margin of 20% and absolute positioned the left div over this margin. Since the main div is also the parent of the left div, setting the height of the left div to 100% makes it stretch to the height of the main div (Which in its place had the height of the content).

    Another (somewhat cleaner) option would be to set the bottom: 0px in stead of the height: 100% on the left div. It would align the bottom to the bottom of the container (main div) but I think that doesn’t work in ie6.

    .topRight, .bottomRight {
    margin: 0px 0px 0px 20%;
}

.main {
    height: 100%;
    position: relative;
}


.leftDiv {        
    position: absolute;
    left: 0px;
    top: 0px;
    width: 18%;
    bottom: 0px;
    background-color: aqua;
}

.topRight {
    background-color: green;
}

.bottomRight {
    background-color: red;
}

.footer {
    background: blue;
}

    http://jsfiddle.net/Z44HK/

    PS: I hope these </br> tags are only used for testing because they look real ugly. CSS was invented to eliminate these kind of presentational tags out of html.

    • 0