I have been trying different ways to solve this and can't get my head around it. What I am looking for is a 3 column format (left, content and right panes) with a top and bottom pane. Menu and control panel are above the top pane.
I have been nearly there for a couple of days now but the issue I am having is this... I want the height of my contentpane to be 100% the height of the parent div it is in (I am using a background for my skin and the background color of the contentpane is white hense the reason) I have my footer stuck to the bottom of the page however... when the content in the content pane gets longer and longer, the bottompane does not move down and I start to get whitespace. Same in IE and Chrome.
I have been trying different techniques but cannot figure it out. Can someone please have a look and see if I am doing something silly...
HTML is set to <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="centric" class="Home">
<div id="Header">
<div id="ContentBG">
<div id="ControlPanelWrapper">
<dnn:CONTROLPANEL runat="server" id="cp" IsDockable="True" />
</div>
<div class="Content">
<div id="LogoRow">
<dnn:LOGO id="dnnLogo" runat="server" />
<div class="LogoRowRight">
<div id="Login">
<div class="SearchContainer"><dnn:SEARCH ID="dnnSearch" runat="server" ShowWeb="False" ShowSite="False" UseDropDownList="True" EnableTheming="true" Submit="Go" /></div>
<% If Request.IsAuthenticated %><div id="Locker"><a href="/mylocker.aspx"><img src="<%= SkinPath %>Images/locker.png" alt="MYLOCKER"></a></div><% End If %>
<dnn:USER ID="dnnUser" runat="server" LegacyMode="false" />
<dnn:LOGIN ID="dnnLogin" CssClass="LoginLink" runat="server" LegacyMode="false" />
<dnn:LANGUAGE runat="server" id="dnnLANGUAGE" showMenu="False" showLinks="True" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="Navwrapper">
<div class="Content">
<div id="Nav">
<dnn:MENU MenuStyle="centricityNav" runat="server" NodeSelector="RootOnly"></dnn:MENU>
</div>
<% If DotNetNuke.Entities.Users.UserController.GetCurrentUserInfo().IsInRole("Administrators") %>
<div id="myschoolwise">
<a href="myschoolwise.com">myschoolwise.com</a>
</div>
<% End If %>
</div>
</div>
<div id="Panes">
<div id="LeftPane" runat="server">
<div id="side-nav" class="column">
<dnn:MENU ID="MENU2" MenuStyle="accordion" runat="server" NodeSelector="RootChildren" ExcludeNodes="Admin, Host" />
</div>
</div>
<div id="ContentPane" runat="server"></div>
<div id="RightPane" runat="server"></div>
<div id="BottomPane" runat="server"></div>
<div id="Footer">
<div id="Footer_LeftPane" runat="server"></div>
<div id="Footer_RightPane" runat="server"></div>
<div id="Footer_BottomPane" runat="server"></div>
<div id="Copyright"><dnn:COPYRIGHT ID="dnnCopyright" runat="server" /><dnn:TERMS ID="dnnTerms" runat="server" /><dnn:PRIVACY ID="dnnPrivacy" runat="server" /><dnn:LINKTOMOBILE ID="dnnLinkToMobile" runat="server" /></div>
</div>
</div>
</div>
CSS
html{height:100%;}
#Body{height:100%;font-family:"Segoe UI", Verdana, Arial, sans-serif;color:#333;}
#Form{height:100%;}
#Navwrapper{width:100%;height:50px;background:#eee url(images/navbg.png) repeat-x top left;position:relative; z-index:1;}
#Navwrapper .Content{position:relative;width:100%;height:50px;margin:auto;}
#Navwrapper #Nav{height:50px;float:left;bottom:35px;left:0;}
#centric{height:100%;width:100%;position:relative;z-index:1;}
#Panes {
width:100%;margin:0px auto;
position:relative; /* needed for footer positioning*/
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#dnn_BottomPane{clear:both;}
#dnn_TopPane {
margin: 0px 0px 0px 220px;
padding: 10px;
height: 70px;
}
#centric.Home #dnn_LeftPane {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width: 220px;
}
html>body #dnn_LeftPane {
width: 220px; /* ie5win fudge ends */
}
#centric.Home #dnn_ContentPane {
margin: 0px 210px 0px 230px;
padding: 10px;
background: #fff;
position:absolute;
top:0;
left:0;
right:0;
bottom:0px;
}
#centric.Home #dnn_RightPane {
position: absolute;
top: 0px;
right: 0px;
bottom:0px;
margin: 0px 10px 0 0;
padding: 0px;
background: #fff;
width: 200px;
height:auto;
}
html>body #dnn_RightPane {
width: 200px; /* ie5win fudge ends */
}
#Footer{position:absolute;width:100%;background:#222;min-height:45px;bottom:0px}