What a pain footers are…. This took some figuring out, but here is a working model. Tested in IE6, IE8, FF3, Safari4, Chrome, Opera & Safari on the iPhone. Should copy and paste over fine.
HTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link href=”css/sheet.css” rel=”stylesheet” type=”text/css” />
<!–[if IE]>
<link href=”css/ie.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
</head>
<body>
<div id=”header”>
<img src=”images/logotrans2.png” />
</div> <!– closing #header” –>
<div id=”outer”>
<div id=”clearheader”>
<!– used to make room for the #header –>
</div>
<div id=”left”>
<p><h3>Products</h3>
<ul>
<li>Shorts</li>
<li>Shirts</li>
<li>Fight Gear</li>
<li>Womens</li>
<li>Accessories</li>
</ul>
<h3>Team Hybrid Fighter</h3>
<ul>
<li>Person 1</li>
<li>Person 2</li>
<li>Person 3</li>
<li>Person 4</li>
</ul>
<h3>Company Info</h3>
<ul>
<li>Mission Statement</li>
<li>Quality</li>
<li>Vision Statement</li>
<li>Media</li>
<li>Contact</li>
</ul></p>
</div> <!– closing #left –>
<div id=”middle”><div id=”content”>
<p><h1>Mission Statement</h1>
<p>Octagon Sport will become the most valued clothing company, to our customers, colleagues, investors, business partners, and the communities where we work and live. Our company will provide our costumers with superior quality active wear. By doing so, we will establish a standard of service that is expected of our company.</p>
<h2>Quality</h2>
<p>Since our inception Octagon Sport has been synonymous with the trust and reliability, inherent in the word Quality. Quality is ingrained in the work we do and all our Values. Our business practices and processes are designed to achieve results that exceed the expectations of our customers, colleagues, investors, business partners and regulators. We have a relentless passion for Quality in everything we do.</p></p>
</div></div> <!– closing #middle –>
<div id=”clearfooter”>
<!– used to make room for the #footer –>
</div>
</div> <!– closing #outer –>
<div id=”footer”>
Copyright © 2009 Octagon Sport.
</div> <!– closing #footer –>
</body>
</html>
<!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>title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/sheet.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link href="css/ie.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> <body> <div id="header"> header content</div> <div id="outer"> <div id="clearheader"> </div> <div id="left">side bar content</div> <div id="middle"><div id="content">Main page content</div></div> <div id="clearfooter"></div> </div> <div id="footer">footer content</div> </body> </html>
CSS
@charset "UTF-8";
/* CSS Document */
* {
margin:0;
padding:0;
border:none;
z-index:0;
}
html, body {
height:100%;
background-image:url(../images/bgtile.jpg);
}
body {
font-family:arial, sans-serif;
color:#000;
font-size:82%;
background:transparent;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:178px;
line-height:100px;
background:transparent;
color: #FFF;
font-weight:bold;
text-align:left;}
#clearheader {
height:178px;
}
#outer{
min-height:100%;
margin-left:200px;
margin-right:100px;
margin-bottom:-100px;
background:transparent;
}
#left {
position:relative;
width:200px;
text-align:center;
float:left;
z-index:100;
margin-left:-199px;
left:-1px;
background-color:#FFF;
margin-top:10px;
}
#middle {
width:90%;
float:left;
position:relative;
z-index:1;
margin:0 -1px;
padding-left:10%;
padding-right:5%x;
padding-bottom:50px;
padding-top:10px;
}
#content {
background-color:#FFF;
padding-left:10%;
padding-right:5%;
padding-bottom:50px;
padding-top:10px;
}
p {
padding:15px 15px 0 15px;
}
#clearfooter {
clear:both;
height:115px;
}
#footer {
width:100%;
clear:both;
height:100px;
line-height:100px;
background-color:#FFF;
color: #000;
font-weight:bold;
text-align:center;
position:relative;
}
IE Conditional CSS
#outer {
height:100%;
}
#left {margin-right:-3px;
}
Notes about the layout: Notice the header heights – in this example they are 178px high. Also note the footer heights – in this example the footer is 100px high. In order to change the height of the footer for example; you need to adjust the height of the #clearfooter div, and the #footer div. Same with the header, it’s clearing element, and their associated paddings & margins. This could be much simpler, but since this example required a tiling background image and some space between the main content and the side bar it needed a few extra things.
Did you appreciate this article? Please click here to donate.
Tech Chronicle 