3 column, middle column going to bottom

driving me crazy

[BlueGhost]

I cant figure this out for the life of me. I see this all of the place, and it almost makes me want to stop using css as much as i do. My 3 column setup looks okay with my big monitor and big resolution, but as soon as i view it at a small resolution and monitor, the middle column goes all the way down to the bottom of the page, on a long page it goes down to over 3000px before you actually see the content! Ok, so on normal pages, i just use the div id "content" for the main part, as you see below. In the 3 column setup, it goes left, right, and then "content". Now, for the page im working on, i have created a new id called "listing" with a width of 730. i figured 730 becuase the table is 500px, and the left nav is about 150px. i left a very wide gap of 70px to allow the page to not do what its doing, but its still bumping the middle all the way down. Oh, and on this page, i have also deleted the right column to make it a 2 column, but that doesnt help. Also, the container has a width of 100%, left has a width of 160, and that should be it. please help, thanks!

<div id="container">
<div id="top"></div>
<div id="banner"></div>
<div id="left">
<div id="navcontainer"><ul><li>list</li></ul></div></div>
<div id="right"></div>
<div id="content">
<p>here is my problem, if i have a table that is 600 pixels width it destroys my page on low resolution monitors</p>
</div>
<div id="footer">footer</div>
</div>
-------------------------------------------------

body {height: 100; font-family: Arial, Helvetica, sans-serif; color: #000; background-color: #ff0; }

#container { width:100%; background-color: #FFFFCC; height: 100%;}
#top { background-image:url(images/condobanner01.jpg); background-color:#FFCC33; height: 80px; }
#banner { margin: 0; padding: 0; height: 47px; background-color:#FFFF00; background-image:url(images/images/mainslices2NEW_06.jpg);}
#left { width: 150px;
float: left;
margin: 0;
padding: 0;
height: 100%;
background-color: #FFFFCC;
}
#right { width: 180px;
float: right;
margin: 0;
padding: 0;
height: 100%;
background-image:url(images/images/downbar02.jpg) }

#content {
line-height: 130%;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
margin-left: 160px;
margin-right: 190px;
padding: 0;
}


#listing {
line-height: 130%;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
margin-left: 150px;
margin-right: 10px;
padding: 0;
width: 730px;
}

#navcontainer {
height: 100%;
background-color: #002CAE;
margin-top: 8px;
width: 138px;
margin-left: 5px;
margin-bottom: 5px;
}

[BlueGhost]

found a solution, overall it seems do able, and my lazy side is telling me not to do it, because i imagine i'll be doing it on every page i build in the future, and its a lot of extra markup that fixes such a small problem. It involves using a bunch of css hacks, and going from 1 div to 4 div's. What do you guys think? I think this is such a huge problem that has to be looked at and taken care of.

[webreference.com...] just so you know, there are 2 pages, the next button at the bottom is kinda easy to skip.