content of div overflows vertically

Hi everyone,

I've been experiencing this problem for a while now without resolve, and its probably very simple really but I'm just not doing something essential.

I have a div with my pages content in it. This is seperated into two columns using float: left.

Unfortunately the div containing these 2 columns does not stretch to accomodate the content and the content overflows at the bottom.

Here it is:

<style>

#main {
width: 702px;
text-align: left;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
background-image: url(images/new/main_slice.gif);
background-repeat: repeat-y;

}

#left {
width: 220px;
float: left;
text-align: center;
}

#right {
float: left;
left: 220px;
width: 480px;

}

</style>

<html>

<div id="main">

<div id="left">

left menu in here

</div>

<div id="right">

</div>

</html>

As you can see it's a very simple layout. If possible I would rather not put height: 100% on the main div because I want to put something underneath it.

Can anyone see a glaring mistake?

Thanks for your help,

PS.

content of div overflows vertically

on simple 2 column layout within main div

PublicSphere

D_Blackwell

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week