- Joined
- 31 Dec 2003
- Posts
- 5,172
- Location
- Barrow-In-Furness
Basically i've got a two column layout right now (not including header and footer).
My problem is that when there's over a certain level of content, the footer gets moved down as expected. The navigation menu of the left has a color assigned, I basically want that div to always go right down to the footer so the colour doesn't break. By break I mean the colour doesn't continue down to the footer, it ends just below the bottom of the navigation menu (which is fine when the content div doesn't have much in because it all lines up).
Not too sure how much sense that's going to make and I can't upload pictures of it sooo.
Any help is welcomed.
Here's the CSS:
Here's the page code:
My problem is that when there's over a certain level of content, the footer gets moved down as expected. The navigation menu of the left has a color assigned, I basically want that div to always go right down to the footer so the colour doesn't break. By break I mean the colour doesn't continue down to the footer, it ends just below the bottom of the navigation menu (which is fine when the content div doesn't have much in because it all lines up).
Not too sure how much sense that's going to make and I can't upload pictures of it sooo.
Any help is welcomed.
Here's the CSS:
Code:
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #E6E6E6;
height: 25px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin-left: 200px; /*Set left margin to LeftColumnWidth*/
overflow:auto;
padding-top:20px;
font-family: Verdana;
font-size: 9px;
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -100%;
background: #EAEAEA;
font-family: Verdana;
font-size: 10px;
height: auto;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFFFFF;
text-align: center;
font-size:9px;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}Here's the page code:
Code:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link rel="Stylesheet" class="text/css" href="StyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="maincontainer">
<div id="topsection"><div class="innertube"><h1>
Man Hours</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b><asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube">
<br />
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ImageSet="Arrows">
<ParentNodeStyle Font-Bold="False" />
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
VerticalPadding="0px" />
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px"
NodeSpacing="0px" VerticalPadding="0px" />
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
</div>
<div id="footer"></div>
</div>
</form>
</body>
</html>
