Forum Moderators: open
Here's a 3 col layout with header 4 you though:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0"? encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
<!--
body {
font-family: arial, helvetica, sans-serif;
height: 100%;
}
#masthead h1 {
font-size: 1.5em;
text-align: center;
}
#left {
position: absolute;
top: 100px;
left: 8px;
width: 200px;
height: 100%;
border: 1px solid #000000;
background-color: #F5F5F5;
padding: .5em;
}
#right {
position: absolute;
top: 100px;
right: 8px;
width: 200px;
height: 100%;
border: 1px solid #000000;
background-color: #F5F5F5;
padding: .5em;
}
#content {
position: absolute;
top: 100px;
padding-left: 240px;
padding-right: 240px;
}
</style> <title>3 column layout with header</title>
</head>
<body>
<div id="masthead">
<h1>3 column layout with header</h1>
</div>
<div id="content">
<p>This layout is a little basic but can easily be expanded
upon. There's no foolproof way of adding a footer that spans all
3 columns effectively. You have to put it in this 'content' div.
</p>
<p> This div has a padding of 220px to both left and right
which <em>should</em> keep things neat. It will flow to fit the
browser window whilst the left and right columns remain fixed.
</p>
<h4>Important</h4>
<p>The absolute positioning of the 3 columns is set to 100px
from the top. You'll need to experiment with this to get it
right. As soon as some bugger starts jacking up the text size
you'll be in trouble if you cut it too fine...</p>
<p><strong>Disclaimer:</strong><br />
I've not tested this, as it's late sunday night!</p>
</div>
<div id="left">
<p>Here is the left column<br />
200px wide with .5em padding</p>
</div>
<div id="right">
<p>Here is the right column<br />
200px wide with .5em padding.</p>
</div>
</body>
</html>
