Div height and stretching question

HTML & CSS
1

this page is fine:

this page has the (center) content div stretching underneath the footer, and not expanding the

Tried many so-called solutions, but haven’t found anything that works in both pages. Thanks in advance for any cross-browser, working solution.

Here’s the applicable divs:

div.outer {
width: 932px;
margin: 0px auto;
text-align: left;
position: relative;
background-color: #1F3F69;
height: 100%;
}
#container
{
width: 794px;
height:100%;
height:auto !important;
min-height: 830px;
text-align: left;
position: relative;
top:0px;
left: 2px;
background-color: #FFFFFF;
padding-bottom:15px;

}
div.leftlogo {
width: 240px;
margin: 0px;
position: relative;
top: 5px;
left: 6px;
text-align:left;
background-color: #FFFFFF;
}
.menu {
width:185px;
text-align:center;
position:absolute;
top: 74px;
left: 24px;
background-color: #D0DBEA;
background-image: url(/images/main/menuback.jpg);
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 1px;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: dotted;
border-top-color: #1F3F69;
border-right-color: #1F3F69;
border-bottom-color: #1F3F69;
border-left-color: #1F3F69;
}
Content {
width: 545px;
height:auto !important;
min-height: 830px;
text-align: left;
position: absolute;
top: 0px;
left: 249px;
background-color: #FFFFFF;

}
div.skyscraper {
width: 124px;
text-align: right;
position: absolute;
top: 4px;
right: 0px;
}
#footer
{
display: block;
padding: 0px 0px 0px 0px;
margin: 0px auto;
position: relative;
bottom: 0;
right: 0px;
background-color: #1F3F69;
background-image: url(/images/main/contbottom.jpg);
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
font-weight: normal;
line-height: 10pt;
text-align: center;
color: #999999;
width: 932px;
height: 15px;
vertical-align: text-top;
}

2

many thanks Ray

3

I reworked the page for you. I left the .topbanner div as AP but it could be floated too.

Everything else on the page has been floated including the inner #container and the #skyscraper ad div. With those two divs as floated siblings the .outer wrapper is the one that will get overflow:hidden to contain those floats.

The floats that are nested in the #container div will be contained by their floated parent. I brought the Content div before the .leftlogo in the page source, they are both floated so either one can come first.

I set some min-heights and BG colors so you can see what is going on. You will also see that I placed a bunch of “p” tags in the main column to show it pushing the footer down.

Just run this code through your browser as test.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Float Layout</title>

<style type="text/css">
body {
    margin:15px 0 0;
    padding:0;
    font:100&#37;/1.4 arial,helvetica,sans-serif;
}
.outer {
    width:932px;
    margin:0 auto;
    background:#1F3F69;
    overflow:hidden;/*contain child floats*/
}
.mastcontainer {
    width:932px;
    height:89px;
    position:relative;/*containing block*/
    background:#1F3F69 url(/images/main/masthead4.jpg) no-repeat;    
}
.topbanner {
    position:absolute;
    top:4px; left:285px;
    width:502px;
    height:80px;
    background:yellow;
    text-align:right;
}
div.skyscraper {
    position:relative;/*auto stack*/
    float:right;
    width:124px;
    min-height:500px;
    margin:-85px 0 0;
    text-align:right;
    background:orange;
}

/*------ Containers --------*/
#container {
    float:left;/*contain child floats*/
    width:794px;
    margin-left:2px;
    display:inline; /*fix IE6 margin bug*/
    background:red;    
    padding-bottom:15px;
}
.leftlogo {
    float:left;
    width:240px;
    min-height:600px;
    margin:5px 0 0 6px;
    display:inline; /*fix IE6 margin bug*/
    background:#0F0;
}
#content {
    float:right;
    width:545px;
    min-height:830px;
    background:#CDF;    
}
#footer {
    clear:both;
    height:15px;
    padding:2px 0;
    background:#1F3F69 url(/images/main/contbottom.jpg) no-repeat;
    font:normal 7pt/10pt verdana, arial, helvetica, sans-serif;
    text-align:center;
    color:#999;
}
p {margin:10px 10px 50px}    
</style>

</head>
<body>

<div class="outer">
    <div class="mastcontainer">
        <div class="topbanner">
            <p>Top Banner Form Here</p>
        </div>
    </div>
    
    <div id="container">                
        <div id="content">
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
            <p>Main Content</p>
        </div>
        <div class="leftlogo"> 
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
            <p>Left Content</p>
        </div>
    </div>
    
    <div class="skyscraper">
        <p>Ads Go Here</p>
    </div>
    
    <div id="footer">FOOTER TEXT HERE</div>
</div><!--end outer-->

</body>
</html>
4

but that is obviously the least of my worries now
Have you ever worked with floats before?

Absolute positioned elements don’t push on static blocks (your footer) and that is why the main column ran over it on the 2nd link you gave.

You have a min-height set on your #container and the footer is sitting outside of it. The container is not expanding with the AP column so the footer is sitting in the same spot on both pages.

If you float your columns your container will expand with them after you force it to contain it’s floats.

I’ll give you an example if you need it

5

thanks. I am clearing the footer, but that is obviously the least of my worries now.

6

almost have it except for the skyscraper div should be positioned at the top. any suggestions?

Thanks

7

Hi, Welcome to SitePoint :slight_smile:

I hate to ruin your day but you need to get rid of all the absolute positioning on your columns and float them instead.

Then your footer will get pushed down with the content height.

You will need to contain your floats within the parent div and clear the footer.