Hi,
If you want the footer to be below the columns then you will need to at least have one static or (floated) column longer than the absolutely placed left and right columns, so that the footer has something to foot.
Or alternatively float the left and right columns and let the middle column be static then the footer will stay at the bottom if you use clear both in the footer style.
I've adjusted some of your code to get the affect I think you want (although this is not meant to be a full solution it should help you in the right direction.)
Code:
<!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>
<title>Oz Home Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">
<!--
body{
margin:0;
padding:0;
}
#top-section{
position:relative;
left:0;
top:0;
margin:0 0 10px 0;
}
#mid-section{
float:left;
margin-top:20px;
width:200px;
}
/*bottom-section{
position:relative;
left:0;
top:0;
}*/
#topCol-1{
position:relative;
padding:0 10px 0 20%;
border-bottom:1px solid black;
}
#midCol-3{
float:right;
padding-right:10px;
margin-top:20px;
width:185px;
border:1px solid #000;
}
#midCol-2{
margin-top:30px;
margin-left: 205px;
margin-right:200px;
border:1px solid #000;
}
#midCol-1{
margin-left:10px;
}
#bottomCol-1{
clear:both;
margin-top: 1em;
padding:0 10px 0 20%;
border:1px solid black;
}
/* Menu Starts here*/
#navcontainer
{
padding: 0;
margin-bottom: 1em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
}
#navcontainer ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}
#navcontainer li a
{
position:relative;
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
}
#navcontainer li a:hover
{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
/* Menu ends here*/
-->
</style>
</head>
<body>
<div id="top-section">
<div id="topCol-1">Header Area</div>
</div>
<div id="mid-section">
<div id="midCol-1">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Design">Design</a></li>
<li><a href="#" title="Portfolio">Portfolio</a></li>
<li><a href="#" title="Photo Gallery">Photo Gallery</a></li>
<li><a href="#" title="Contact Us">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="midCol-3">Column 3</div>
<div id="midCol-2">Column 2</div>
<!--<div id="bottom-section">-->
<div id="bottomCol-1">Footer Area</div>
<!--</div>-->
</body>
</html>
Hope that helps.
Paul
CSS Layout Troubles
, this is what iam trying to achieve.
Bookmarks