My Footer is affecting my multi-column layout

PurpleSlade
PurpleSlade used Ask the Experts™
on
Hi, I have the following code for my main page.  I am primarily concerned about the 3 columns followed by the footer.  I want to make the footer menu items appear similar to what I've done to the header.  However, when I try and float the elements in the footer as I do in the header, it seems to screw with the above container and left, center, right columns.  I am unsure how to apply style to the footer which will leave the layout above intact and maintain the look and feel that I want to apply from the header to the footer.
<!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" xml:lang="en" lang="en">
 
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="" />
 
	<title></title>
	
	<style type="text/css">
	
	* html #left {
		left: 150px;
	}
	
	body {
		min-width: 550px;
		background-color: gray;
		/* background: url(bw-stripe2.gif) repeat; */
		font-family: arial, helvetica, sans-serif;
	}
	
	#container {
		width: 950px;
		margin: auto;		
	}
 
	/* HEADER CSS */	
	#header {
		background-color: black;
		height: 100px;
		padding-left: 230px;
		padding-top: 10px;
	}
	
	#header ul {
		float: left;
		list-style: none;
		margin: 0;
		padding: 0 20px 0 0;		
	}
	
	/* Headers for Menu Items */
	#header ul li.mHeader {
		font-size: 2em;
	}
	
	#header a {
		text-decoration: none;
	}
	
	/* why doesn't this work anymore? */
	#header ul li a:hover {
		color: white;
	} 
		
	#header div.mAbout {
		color: red;
	}
	
	#header div.mAbout a:link {
		color: red;
	}
	
	#header div.mAbout a:visited {
		color: red;
	}
	
	#header div.mAbout a:hover {
		color: white;
	} 
	
	#header div.mServices {
		color: yellow;
	}
	
	#header div.mServices a:link {
		color: yellow;
	}
	
	#header div.mServices a:visited {
		color: yellow;
	}
	
	#header div.mServices a:hover {
		color: white;
	}	
	
	#header div.mPortfolio {
		color: blue;
	}
	
	#header div.mPortfolio a:link {
		color: blue;
	}
	
	#header div.mPortfolio a:visited {
		color: blue;
	}
	
	#header div.mPortfolio a:hover {
		color: white;
	}	
	
	#header div.mContact {
		color: green;
	}
	
	#header div.mContact a:link {
		color: green;
	}
	
	#header div.mContact a:visited {
		color: green;
	}	
	
	#header div.mContact a:hover {
		color: white;
	}
	
	/* END HEADER CSS */
	
	/* FOOTER CSS */
	
	#footer {
		background-color: black;
		color: white;
		clear: both;
		/* height: 100px; */
	}
	
	/* 
	#footer ul {
		float: left;
		margin: 0px;
		padding: 0px;
	}
	*/
	
	/* END FOOTER CSS */
	
	
	#banner {
		background-color: blue;
		text-align: center;
		height: 100px;
		/* background: url(./images/spiderweb-banner2.jpg) no-repeat center; */
	}
	
	#crumbs_wrapper {
		background: url(bg-black.gif) repeat-y left;
	}
	
	#crumbs {
		background-color: black;
		font-size: 1.2em;
		color: white;
		margin-left: 150px;
		padding: 10px;
	}
/*	
	#outer_wrapper {
		background: url(bg-darkgray.gif) repeat-y right;
	}
	
	#wrapper {
		background: url(bg-darkgray.gif) repeat-y left;
		border: solid thin yellow;
	}
*/
 
	#container2 {
		border: solid thin white;
		padding-left: 200px;
		padding-right: 150px;
	}
	
	#container .column {
		position: relative;
		float: left;
	}
	
	#center {
		width: 100%;
		background-color: yellow;
	}
	
	#left {
		width: 200px;
		right: 200px;
		margin-left: -100%;
		background-color: red;
	}
	
	#right {
		width: 150px;
		margin-right: -150px;
		background-color: green;
	}
	
 
	</style>
</head>
 
<body>
 
<div id="container">
	<div id="header">
		<div class="mAbout">
			<ul>
				<li class="mHeader">About</li>
				<li><a href="">Who I am</a></li>
				<li><a href="">How I work</a></li>
			</ul>
		</div>
 			
		<div class="mServices">
			<ul>
				<li class="mHeader">Services</li>
				<li><a href="">Math Calculations</a></li>
				<li><a href="">Tutoring</a></li>
			</ul>
		</div>
		 	
		<div class="mPortfolio">
			<ul>
				<li class="mHeader">Portfolio</li>
				<li><a href="">Selected Works</a></li>
				<li><a href="">Resume</a></li>
			</ul>
 		</div>
			 	
 		<div class="mContact">
			<ul>
				<li class="mHeader">Contact</li>
				<li><a href="">Submit Bid</a></li>
				<li><a href="">Say Hello</a></li>
			</ul>				 
 		</div>
		
	</div><!-- end header -->
 
	<div id="banner"></div>
	
	<div id="crumbs_wrapper">	
		<div id="crumbs">Crumbs</div>
	</div>
	
	<div id="container2">
		<div id="center" class="column">
			<p>Ille paulatim caecus neo, sit epulae capio. Consequat comis melior quidne indoles pneum comis humo duis haero eros aliquam. Roto opto luptatum, commoveo dignissim mos vereor. Defui fere vulputate rusticus eu ventosus validus cogo indoles. Antehabeo in nunc epulae aliquam, camur humo tation et ullamcorper iaceo. Odio dolor feugait aliquip, minim consequat inhibeo singularis eros nutus melior ut. </p>
 
			<p>Fatua olim, camur feugait, nonummy pagus, valde commodo, ratis singularis. Roto conventio neque sed olim typicus euismod lenis, melior enim voco sino quis. Pagus caecus melior duis inhibeo verto, vulpes vero lenis, epulae dolore, ullamcorper probo. Interdico sagaciter persto ymo quae capio venio occuro. Exerci saluto duis suscipit saepius, esca defui nulla ut duis saepius causa abbas turpis. Iriure illum, saepius hendrerit os praesent. Ibidem immitto nobis, modo pneum regula. Si opes ut lobortis capto roto, causa te exputo luptatum brevitas vulputate ibidem accumsan.</p> 
 
			<p>Vulpes tego magna vel probo facilisi antehabeo ex persto, letalis refero. Illum esse demoveo refoveo sit ingenium, eum ut pneum. In ulciscor tum vel tincidunt, vel opes suscipit. Valetudo eum ad vel gilvus ullamcorper. Aliquip comis tego feugait tristique duis.</p>
		</div>
		<div id="left" class="column">Some content in the left column.</div>
		<div id="right" class="column">Some content in the right column.</div>
	</div>
	
	<div id="footer">
		<div class="mAbout">
			<ul>
				<li class="mHeader">About</li>
				<li><a href="">Who I am</a></li>
				<li><a href="">How I work</a></li>
			</ul>
		</div>
 			
		<div class="mServices">
			<ul>
				<li class="mHeader">Services</li>
				<li><a href="">Math Calculations</a></li>
				<li><a href="">Tutoring</a></li>
			</ul>
		</div>
		 	
		<div class="mPortfolio">
			<ul>
				<li class="mHeader">Portfolio</li>
				<li><a href="">Selected Works</a></li>
				<li><a href="">Resume</a></li>
			</ul>
 		</div>
			 	
 		<div class="mContact">
			<ul>
				<li class="mHeader">Contact</li>
				<li><a href="">Submit Bid</a></li>
				<li><a href="">Say Hello</a></li>
			</ul>				 
 		</div>
	</div><!-- end footer div -->
</div><!-- End Container div -->
 
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
try inserting a <div id="clearfloat"> in between the container2 div and the footer div.

then style it with this

#clearfloat {
    margin:0;
    padding:0;
    clear:both;
}

Author

Commented:
That didn't work, but I eventually figured it out.  

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial