I am having a hell of a time getting my layout to expand to the length of the panels.  If I have a long html module, it bleeds past my footer, etc.  I have set a min-height which covers alot of the pages, but that is not ideal as I still get modules that go past the footer and sometimes white space.

Here is my Layout.Master and the relevant CSS as current, but I've tried many different things including float, and different position elements:

I tried some other skins by making the right side long and they bleed over as well
Any help would be appreciated and should be worth a beer or 2 :-)

<div class="wrapcenter">
<asp:Panel ID="divAlt1" runat="server" CssClass="altcontent1">
<asp:ContentPlaceHolder ID="altContent1" runat="server"></asp:ContentPlaceHolder>
</asp:Panel>

<asp:Panel id="divLeft" runat="server" cssclass="leftside" visible="True" SkinID="pnlPlain">
<asp:contentplaceholder ID="leftContent" runat="server"></asp:contentplaceholder>
</asp:Panel>
<asp:Panel id="divCenter" runat="server" visible="true" cssclass="center-nomargins" SkinID="pnlPlain">
<!-- <portal:ChildPageMenu id="ChildPageMenu1" runat="server" CssClass="Head" /><a id="startcontent"></a> -->
<asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>
</asp:Panel>

<asp:Panel id="divRight" runat="server" visible="true" cssclass="rightside" SkinID="pnlPlain">
<asp:contentplaceholder ID="rightContent" runat="server"></asp:contentplaceholder>
</asp:Panel>

<asp:Panel ID="divAlt2" runat="server" CssClass="altcontent2">
<asp:ContentPlaceHolder ID="altContent2" runat="server"></asp:ContentPlaceHolder>
</asp:Panel>

</div>

<div class="wrapfooter">
<portal:SiteMapLink id="SiteMapLink3" runat="server" CssClass="sitemaplink" /> |
<portal:SkinPreview id="SkinPreview2" runat="server"></portal:SkinPreview>
</div>

/* Content */
.wrapcenter {position: relative; top: 90px; width: 100%; height:100%; margin: 0 10px 10px 10px; min-height: 500px;}

.leftside {position:absolute; left: 0; top: 0; height: 100%; width:320px; padding: 0 10px 0 0; }
.center-nomargins {position:absolute; left: 0; top: 0; height: 100%; width: 970px;}
.center-rightandleftmargins {position:absolute; left: 330px; top: 0; height: 100%; width:320px; margin: 0 10px 0 10px;}
.center-rightmargin {position:absolute; left: 0; top: 0; height: 100%; width: 640px; margin: 0 10px 0 0;}
.center-leftmargin {position:absolute; left: 0; top: 0; height: 100%; width: 640px; margin: 0 0 0 10px;}
.rightside {position:absolute; left: 650px; top: 0; height: 100%; width:320px;}

/* Site Map Footer */
.wrapfooter { text-align: center; }
.wrapfooter a { text-decoration:none; }
.wrapfooter a:hover { text-decoration: underline; }
 

Hey Joe, Thanks.  Easy fix once pointed in the right direction.  The issue was my wrapcenter was position:absolute.  Changed it to relative and it was easy from there.  Updated CSS is below.

Also note, I have 2 footers.  The first is float.  The second, if I change to float, screws up the whole container, so I set that to relative.  But it works great like this:

/* Content */
.wrapcenter {position: relative; top:0px; width: 100%; height:100%; margin: 0 10px 10px 10px;}

.leftside {float:left; height: 100%; width:320px; }
.center-nomargins {float:left; height: 100%; width: 970px;}
.center-rightandleftmargins {float:left; height: 100%; width:320px; }
.center-rightmargin {float:left; height: 100%; width: 640px; margin: 0 10px 0 0; }
.center-leftmargin {float:left; height: 100%; width: 640px; margin: 0 0 0 10px; }
.rightside {float:left; height: 100%; width:320px; }

/* Site Map Footer */
.wrapfooter {float: left; text-align: center; width: 100%; clear:both; margin: 15px 0 10px 0; }
.wrapfooter a { text-decoration:none; }
.wrapfooter a:hover { text-decoration: underline; }

/* pagefooter */
.pagefooter {position: relative; margin: 10px 10px 10px 10px;}

Beer on the way.