div not expanding

[nightster]

Hi guys,

I'm an infrequent web developer and am a bit rusty to say the least!

I have a problem where a div won't expand to contain the content. I;ve created a simplified version of the problem which you can see here:
http://www.alechorneantiques.com/test2.php

See how the yellow main div is not expanding to take all of the content and is overlapping the gray footer div at the bottom of the page.

Any ideas what may be causing this issue?

The css code is:

#wrapper {
margin: 0 auto;
width: 800px;
text-align: left;
background: red;
}

#header {
width: 800px;
border: 0px solid red;
height: 145px;
background: blue;
}

#content {
width: 800px;
border: 0px solid red;
position: relative;
background: yellow;
}

#footer {
width: 800px;
border: 0px solid red;
height: 30px;
padding-top:20px;
background: gray;
}

#main{
width: 500px;
position: absolute;
top: 0px;
left: 278px;
}

#bookcase{

}


I can post the HTML code as well if it helps.

I would really appreciate any help! It's got to be a basic problem - but it escapes me just now!

Thanks,

Rob.

[bionoid]

Your main content is set absolutely. Absolute elements do not take up space so it won't push the content area down.
I would suggest playing around with float instead, and clearing them before closing the content element.

[nightster]

Great, thank you!