Hi,
Here is the code in working order
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>Fishing Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html, body {height:100%}
body {
padding:0;
margin:0;
text-align:center;
min-width:760px;/* FF*/
color: #000000;
background-color: #00005B;
}
#outer{
min-height:100%;
width:758px;
border-left:1px solid #000;
border-right:1px solid #000;
color: #000000;
text-align:left;
margin:auto;
position:relative;
background-color:#FFFFFF;
position:relative;
}
* html #outer{ height:100%;} /*for IE*/
#innerwrap {/* CFt */
float:left;
width:626px;
}
#header{
position:absolute;
top:0;
left:-1px;
width:758px;
height:100px;
background:#FF0000;
border:1px solid #000;
overflow:hidden;
color: #000000;
z-index:100;
background-color: #FFFFFF;
}
#left {
position:relative;/*left col float */
width:120px;
float:left;
padding-top:100px;/*padding for header*/
padding-bottom:0px;/*padding bottom */
}
#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:4px;padding-right:2px}
#right {
position:relative;/*for IE float */
width:120px;
float:right;
padding-top:100px;/*padding for header*/
padding-bottom:0px;/* padding for footer*/
}
#footer {
width:758px;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color:#2D8800;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #FFFFFF;
text-align:center;
margin:-52px auto 0;
position:relative;
}
* html #footer {/*for IE*/
height:52px;
he\ight:50px;
}
div,p {margin-top:0}
#centrecontent {
width:498px;
float:right;
padding-top:100px;
}
#centrecontent p {padding-left:3px}
#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */
/* CSS Document */
#navigation {
width:120px;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
}
#navigation ul {
list-style:none;
margin:0px;
padding:0px;
}
#navigation li {
border-bottom: 1px solid #FFFFFF;
}
#navigation li a:link, #navigation li a:visited {
display:block;
width:100px;
padding: 5px 5px 2px 0.5em;
border-left:10px solid #336600;
border-right:1px solid #336600;
background-color:#2D8800;
color:#FFFFFF;
text-decoration:none
}
#navigation li a:hover {
background-color:#336600;
color:#FFFFFF
}
/* Sub Title formatting */
#title {
display:block;
list-style:none;
background-color:#2D8800;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
border-left:4px solid #336600;
border-right:4px solid #336600;
font-style:normal;
}
#title p {
text-decoration:underline;}
#leftcolum li {
border-left:10px solid #336600;
border-right:1px solid #336600;
background-color:#2D8800;
}
</style>
</head>
<body>
<div id="outer">
<div id="innerwrap">
<div id="centrecontent">
<!--centre content goes here -->
<p></p>
<p>See the explaination on the main 3 col demo for more information on these designs. </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="left">
<div id="navigation">
<ul>
<li><a href="fishing.html">Fishing</a></li>
<li><a href="/forum/">The Forum</a></li>
<li><a href="watercraft.html">Watercraft</a></li>
<li><a href="fishing-tackle.html">Tackle</a></li>
<li><a href="rigs.html">Rigs</a></li>
<li><a href="accessories.html">Accessories</a></li>
<li><a href="fishing-baits.html">Baits</a></li>
<li><a href="fish-species.html">Species</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="fishing-videos.html">Videos</a></li>
<li><a href="fishing-games.html">Fishing Games </a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="directory.html">Directory</a></li>
<li><img src="http://www.fishers-homes.com/leftcol.jpg" width="124" height="291" /></li>
</ul>
<div id="leftcolum">
<p> </p>
<p> </p>
</div>
</div>
</div>
</div>
<!-- end innerwrap -->
<div id="right">
<div id="title">
<div align="center"><strong>Popular Topics: </strong></div>
<p> </p>
<p>Fly Fishing</p>
<p>Rods</p>
<p>Ground Bait</p>
<p>Sea Fish Images</p>
<p>Fishing Videos</p>
<p>Rivers</p>
<p>Forums</p>
<p><img src="http://www.fishers-homes.com/rightcol.jpg" width="87" height="329" /></p>
<p></p>
</div>
</div>
<div id="clearfooter"> </div>
<!-- ie needs this -->
<div id="header">
<p><img src="http://www.fishers-homes.com/images/header.jpg" alt="header image of fish"/></p>
</div>
</div>
<!-- end outer div -->
<div id="footer"><a href="index.html">Home</a> | <a href="about-us.html">About Us</a> | <a href="contact-us.html">Contact Us</a> | <a href="copyright.html">Copyright</a></div>
</body>
</html>
If you want the left and right columns to extend to the bottom then use a background image repeated n the main container as in this example.
http://www.pmob.co.uk/temp/3col-centred-template7.htm
Posting Permissions
Bookmarks