asked on

CSS error with coloums

Hi having a nightmare with css, I am used to the old tables but want to do it in css

if the code below I want the footer to line up with the columns above. and the pink white and grey columns to grow together. how that make sense. just typed a load of rubbish to see if the grow.

Here is what I have so far:

<!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>Untitled Document</title>
<style type="text/css">
body{
      background-color: #09F;
      }
#Header {
      background-color: #039;
      height: 200px;
      width: 960px;
      position: relative;
      margin-left: auto;
      margin-right: auto;
}

#page {
      background-color: #FFC;
      height: auto;
      width: 960px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: auto;
      margin-top: 0px;
      margin-bottom: 0px;
}
#LeftNav {
      background-color: #C9F;
      height: 100%;
      width: 200px;
      position: relative;
      float: left;
}

#Main {
      background-color: #FFF;
      width: 560px;
      height: 100%;
      position: relative;
      margin-top: 0px;
      float: left;
}

#RightNav {
      background-color: #666;
      position: relative;
      width: 200px;
      height: 100%;
      float: right;
}

#Footer {
      background-color: #0FF;
      height: auto;
      width: 960px;
      position: relative;
      margin-right: auto;
      margin-left: auto;
      margin-top: 0px;
      margin-bottom: 0px;
      padding: 0px;
}
</style>
</head>

<body>
<div id="Header">
</div>
<div id="page">

<div id="LeftNav">

<p>mjgdhhgdh
jgdhdhgdh
khdfjghfdgjh
jghdhdh </p>
<p>gjhfghfdhd</p>
<p>jgdhjgdgdg</p>
<p>lihyoiutiiuti</p>
<p>yiruytrtuyruyt</p>
<p>iutitutitiy</p>
<p>jhfdfghfhg</p>
<p>jgfdghdhdhg</p>
</div>
<div id="Main">
<p>gfdhdfh</p>
<p>gfdhdfhgfd</p>
<p>gfhdfh</p>
<p>gfdhgfdhgfd</p>
<p>gfdhgfdhgfdhgf</p>
<p>gfdhgfdhgfd</p>
<p>gfdhdfhgfdh</p>
<p>gfdhgfdhgfdh</p>
<p>gfdhdhgfdhgf</p>
<p>gfdhgfdhgfdh</p>
<p>gfdhgf </p>
<p>gfdhgfdhfg</p>

</div>
<div id="RightNav">
<p>yuttrurytuytru</p>
<p>gfdhdfhfhf</p>
<p>gfdhdfhgfhgf</p>
<p>gfdhfdhgf</p>
<p>gfdhfdhgdhgfd</p>
<p>gfdhfdhgfdh</p>
<p>gfdhdfhgfdh</p>
<p>gfdhfdhgfdh</p>
<p>gfdhdhgfdh</p>
<p>gfhd</p>

</div>
</div>
<div id="Footer">
<p>djgfdgfhjfgjgf</p>
</div>
</body>
</html>

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

taz8020

ASKER

Thank you had to change a few things but really helped.