CSS Height Issue

[ts10]

Here's my site - you can see the text goes well beyond the height for the #wrapper:

http://publisher.tidbitsweekly.net/index.php

I've set my min-height to 600px and set the height to auto, etc. but nothing I try has any effect of IE or on FireFox. Here's my css, reverted back to its original state since my changes didn't work:

body {
margin: 0px;
padding: 0px;
text-align: center;
background-color:#CCCCCC;
}
#wrapper {
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
padding: 0px;
width: 700px;
height:600px;
position:relative;
}
.header {
margin: 0px;
padding: 0px;
}
.mainBody {
margin:0px;
padding:0px;
width:475px;
border: 0px solid #000000;
position:absolute;
left:220px;
top:200px;
}
.mainTitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-style: italic;
font-weight: bold;
height:50px;
color: #0000FF;
}
.ofYourArea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #ffffff;
margin: 0px;
border: 0px;
padding: 0;
text-align: left;
position:absolute;
left:160px;
top:115px;
}
.forAdvertisingCall {
margin: 0px;
border: 0px;
padding: 0;
text-align: left;
position:absolute;
left:500px;
top:130px;
}
.advertisingPhoneNumber {
margin: 0px;
border: 0px;
width: 182px;
padding: 0;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: italic;
font-weight: bold;
position:absolute;
left:500px;
top: 145px;
}
.nav {
width:190px;
padding: 3px;
height:200px;
position:absolute;
}
.links {
background-color: #fffbfc;
width: 174px;
border: 1px ridge #CCCCCC;
height: 20px;
font-family: Helvetica, sans-serif;
font-size: 13px;
text-align: center;
padding-top: 4px;
font-weight: bold;
margin-bottom: 3px;
}
.links:hover {
background-color: #FFFFFF;
width: 174px;
border: 1px ridge #CCCCCC;
height: 20px;
font-family: Helvetica, sans-serif;
font-size: 13px;
text-align: center;
padding-top: 4px;
font-weight: bold;
margin-bottom: 3px;
background-image: url(images/mouseover_button.jpg);
background-repeat: repeat-y;
}
.footer {
background-color: #64768f;
height: 50px;
width: 700px;
bottom: 0;
position:absolute;
text-align: center;
}
a.footerLinks {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
text-decoration: underline;
padding-top:30px;
}


Any help with getting my page to have a minimum of 600px but also stretch when necessary would be really appreciated!

Thanks!

[sneakyimp]

You might try viewing the page in Firefox and using the DOM inspector (or the FireBug plugin) to find out exactly what styles your HTML element is inheriting. You maybe surprised about which descriptors are actually being applied.