Pushing the footer and extending the page wrap

HTML & CSS
1

Hey all,

So after many hours of building this website, little genius here decided to add the doctype at the very end of the process.

Whoops. Everything broke. So I was able to piece back together the 4-column layouts using absolute positioning on the layers and wrapping them in a relative positioning. Easy enough.

But I’m encountering two problems.

• I want to push the footer to the bottom of the page without the footer following the bottom of the browser. Tips on the web don’t seem to take this into account—or if they do—I’m clearly not doing something correctly.

• I want the container to span the height of the browser so that you have a white block over a color background, set in the body { } tag. The problem is that if the column lengths are broken: only the broken column continues the container. So if column 1 and 4 have 600px of content, and columns 2 and 3 have 1000, 2 and 3 continue the white background of the container. 1 and 4 don’t.

I apologize as I’m sure the latter has an easy trick which I’m not figuring out. But the footer thing is more puzzling.

The css:

* {
margin: 0;
padding: 0;
}

img {
border: none;
}

body {
	background-color: #B9D3EE;
	font-size: 1em;
	text-align: center; /*center #pageWrapper in IE 5.x */
}

h1 {font-weight: normal; font-size: 1.2em; font-family: Cambria, Georgia, sans-serif; overflow:wrap;}

p {padding: 10px 0 0 0; font-size: .7em; font-family: lucida, arial, sans-serif; line-height: 1.6em;}

.reduce {font-size:90%; line-height:95%;}

#signature {
	position: relative;
	height: 180px;
	background:url(CC-Header-photo.png) no-repeat center center;
}

#signature img {
display: none;
}

#textWrapper {
	position: relative;
	width: 780px;
	min-height: 100%;
	margin: 0 auto;
	text-align: left;
	background: #ffffff url('shield-element.jpg') no-repeat right bottom;
	height: 100%;
	background-image: url(shield-element.jpg);
	overflow: visible;
}

hr {
display: none;
}

table {
valign: top;
}

td {
	width: 225px;
	vertical-align: top;
	padding: .5em .2em;
	font-family: lucida, arial, sans-serif;
	font-size: 0.9em;
}

th {
	border-bottom: 2px dotted;
	text-align: left;
	font-family: lucida, arial, sans-serif;
	font-size: 0.9em;
}

li {
padding: 1em 0 1em;
font-size: .7em; font-family: lucida, arial, sans-serif; line-height: 1.6em;
list-style-position: inside;
overflow: wrap;
}

#navBar {
	position: relative;
	height: 50;
	background-color: white;
	list-style: none;
	font-family: cambria, helvetica, sans-serif;
	padding-top: 0px;
	text-align: center;
	border-top: 1px dotted #666;
	border-bottom: 1px dotted #666;
	width: 780px;
}

#navBar li {
display:inline;
}

#navBar hr {
display: block;
background-color: black;
}

#navBar a {
display:-moz-inline-block;
display:-moz-inline-box;
display: inline-block;
white-space: nowrap;
text-decoration: none;
font-size: 1.25em;
color: black;
padding: .6em 3em;
}

#navBar a:active,
#navBar a:focus,
#navBar a:hover {
background: rgb(6,11,85) 0 no-repeat;
}

#navBar a:hover {
color: gold;
}

#column1 a {
text-decoration: none;
}

#column1 a:active,
#column1 a:focus,
#column1 a:hover {
background-color: rgb(6,11,85);
}

#column1 a:hover {
color: gold;
}

#column1, #column2, #column3, #column4, #column5, #column52, #column6, #column7, #full {
	position: absolute;
	top: 251px;
	min-height: 600px;
	padding: 4px 2px 4px;
	background-color: white;
	width: 684px;
}

/*  column above current columns */
#announce {
position: relative;
clear: both;
padding: 30px 3em;
border-bottom: 1px dotted;
}

/* used only when there is a single column, no additional columns */
#full {
	padding: 30px 3em;
}

#column1 {
left: 0;
width: 195px;
}

#column2 {
	width: 195px;
	left: 195px;
	border-left: 1px dotted #666;
}

#column3 {
	width: 195px;
	left: 390px;
	border-left: 1px dotted #666;
}

#column4 {
	width: 195px;
	left: 585px;
	border-left: 1px dotted #666;
}


/* the left hand double column */
#column5 {
left: 0;
width: 390px;
}

/* the right hand double column */
#column52 {
left: 391px;
width: 390px;
border-left: 1px dotted;
}

#column6 {
left: 196px;
width: 585px;
}

/* footer layouts */

#footer {
	margin: -40px 0 0;
	position:relative;
	clear: both;
	border-top: dotted 1px #666;
	height: 40px;   /* Height of the footer should match the negative margin set in the wrapper as well as the clear class below */
	background:#FFF;
	width: 780px;
	text-align: center;
	white-space: nowrap;
}

#footer .clearfooter {
clear: both;
height: 40px;
}

And HTML of the page which spans an unusual length (copy removed):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About Us | Emory College Council</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link href="new_CC_CSS_3.css" rel="stylesheet" type="text/css">

</head>
<body>

<div id="textWrapper">

<div id="signature">
<img alt="The College Council welcomes you!" src="">
</div>

<ul id="navBar">
<li><a href="about.html">about us</a></li>
<li><a href="minutes.html">minutes</a></li>
<li><a href="opinions.html">opinions</a></li>
<li><a href="calendar.html">calendar</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>

<div id="column1">

<h1><a href="CCWeb_v3.html">Return Home</a></h1><br />

<h1>About Us</h1>

<p>Cleanliness and simplicity is the idea behind this build. </p>
<p>What is more is that the code behind this build is very simple: come the 56th College Council it would be very easy to train the incoming secretary to make periodic updates.</p>
</div>

<div id="column6">
<table border="0" bordercolor="#FFFFFF" style="background-color:#FFFFFF" width="445px" cellspacing="10px">
	<tr>
		<th>Freshman Legislators</th>
		<td>Lorem Ipsum</td>
	</tr>
</table>


</div> <!-- column 6 -->

</div> <!-- for text wrap -->

</body>
</html>