3 column layout

acevision7 · February 24th, 2008, 11:13 PM

Having problem's getting white space in between the top left and right columns of the bottom header, they are just appearing butted up to the bottom, here is my code, any help would be great, and greatly appreciated. thanx.

<!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>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>3 Column Layout wrox</title>
<link rel="stylesheet" type="text/css" href="3columcss.css" media="all" />
</head>
<body>
<div id="header">
<center>
<p>How do you like those apples</P>
</center>

</div>
<div id="container">

<div id="left">
<h2>This is the left column.</h2>[list]
<li><a href="http://echoecho.com/">Link 1</A></li>
<li><a href="http://echoecho.com/">Link 2</a></li>
<li><a href="http://echoecho.com/">Link 3</A></li>

</ul>
<p>Some basic information goes here.</p>

</div>

<div id="right">
<h2>This is the right column.</h2>[list]
<li>Did you know that lists rock</li>
<li>they do</li>
<li>Quite a bit.</li>
</ul>
more information goes here
<p>
<P>
fgfgfdgfggfgfgfgfgfgfgfgfg
gfgfdgfgfgggfdgfgfgfgggfdg
gfgfgfgfggfggfggfgfgfffggfg
gfgfgfgfgfdggfgfgfgfgfgfgf
gfgfgfgfgfgfgfgfgfgfgfgfgfg
gfgfgfgfgfgfgfgffgfgfgfgfgf
gfgfgfgfgfgfgfgfgfgfgfgfgfgfd

gfgfgfgfdgfgfgfgfgfgfgfgfgf
gfgfgfgfgfgfgfgfgfgfgfffgfg
fgfgfgfgfgfgfgfgfgfgfgfgfgf
gfgfgfgfgfgfgfgfgfgfgfgfgfgfgf

</div>
<div id="content">
<h1> Welcome to my home page layout.</h1>

Certe, inquam, pertinax non ero tibique, si mihi probabis ea...<br>
hgfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhgfhgfhgfhhhhhhhh< p>
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh< p>
hgfhgfhhfghhgfhgfhgfhhhhhgfhgfhghgfhgfhgfhgfhghgfd hghgdhg<p>
hgfhgfhhgfhhnbnbnhhfhgfhfghfhfghgfhfghfghfhhfhfghh hhhgfhfh<p>

<p>
khhohoioiooioi<br>
njhjijjjhjhjkl<br>
lpppp[op[pp[p<br>

hgguigiu
<p>
cghjcghjcghjcgh<br>
gyuoigyugyuiog
<p>
bjhuhbjuhbjkhbjkbjk<br>

bhyughyou
dfdsfdsfdsfsdffdsfsdfdfffsdfsdffsffffdsfdsfffffdfd fdfdf<P>
dfdsfdsfdffffdfdsfdsfdfdfdsfdfdfdfdfdfdfdfdfdfdfdf dfdfd<P>
fdfdfdffdfdsfdsdsfdsffffdsfdsfddfdsfdfdfdfdfdfddfd fdsfds|<P>

</div>

<div id="footer">

<p>Them aplles are <em>tasty</em>.</p>
</div>

</body>
</html>

css.page

body {
     color: #000;
     font: 76%/1.5em " Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;
     margin: 0;
     padding: 0;
}

h1, h2 {
     font-family: "Trebuchet mS", Verdana, Geneva, Helvetica, sans-serif;
     font-weight: normal;
     line-height: 1em;
     margin-top: 0;
     }

#header {
     background-color: #DFD;
     border: 2px solid #060;
     }

#footer {
    background-color: #FDD;
    border: 1px solid #C00;
    }

#left, #right {
    background-color: #DDF;
    border: 2px solid #00C;
    }

#header hr, #footer hr {
    display: none;
    }

#left {
    position: absolute;
    left: 0;
    top: 0;
    width: 175px;
    }

#right {
    position: absolute;
    right: 0;
    top: 0;
    width: 175px;
    }

#container {
    position: relative;
    }

#content {
    margin: 0 190px;
}