Another CSS layout Q.

[mattgaunt]

Hey everyone

One a site I'm working on if I have a div that holds all the main content and a div that has a googlead and another div that has a footer, like so

<div class="pagecontent">

<!-- Content Here -->

</div>

<div class="googlead"></div>
<div class="footer"></div>

why is it that with this CSS style sheet

.pagecontent
{
width:1000px;
height:350px;
font-family: Trebuchet, Verdana, Tahoma, Arial, Sans-serif;
margin-left: auto;
margin-right: auto;
}

.googlead{
padding-top:20px;
}

.footer{
background-image: url("../images/matchboxfooter.png");
background-repeat: no-repeat;
background-position: top center;
width:100%;
padding-top:10px;
}

the footer will be at the bottom of the 350px of pagecontent, yet if I set height of pagecontent to 100% the footer ends up half way up the page??

I can see the advantage of CSS sheets but Im pretty tempted to stick it all in a table, any ideas why this happens?

Thanks a lot

Gaunt

 

[mattgaunt]

I managed to fix it, i just found a site that had a similar layout that I wanted - basically used clear:both; and everything slotted into place

Gaunt