Okay, I'm making a CSS layout with header, left menu and center divs with margins on the top, left, and right. Each div and the main background all have a different background color and borders, so the edges of each are obvious. I'd like the left and center divs to line up at the bottom, but they each just end with the last line of text. I tried entering height specificiations in pixels and then in percents, but because I'll have a different amount of text on each page, that isn't really working for me. I hope I'm making sense...can anyone help?

Here's what I've got...

<style type="text/css">

body
{ margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
padding-left: 0px;
padding-right: 0px;
height: 100%;
background: #66CC99;
}

#header {
margin: 0px;
padding: 0px;
height: 150px;
background: #9966CC;
border-style: solid;
border-color: #000000;
border-width: 1px;
}
#left {
position: absolute;
left: 20px;
top: 170px;
width: 150px;
background: #CC6699;
border-style: solid;
border-color: #000000;
border-width: 1px;
}
#center {
top: 150px;
margin-left: 150px;
margin-right: 0px;
background: #66CC99;
border-style: solid;
border-color: #000000;
border-width: 1px;
}

</style>