CSS/DIV layout help needed

[joeyjojo]

Hi all
Im trying to come up with a fairly simple layout using divs and css.



Green box 100% width, fixed height
Yellow box fixed width, 100% height
Blue box auto width, 100% height
They all need to be contained in another div (I presume) so they can be centrally aligned.

This is what I've got so far, probably best to ignore it

<div id="outer">
<div id="head"></div>
<div id="nav"></div>
<div id="content"></div>  
</div>

body {  text-align: center;  }  
#outer {  text-align:left;  margin: 0px auto;  width: 600px;  }    
#head{  width:100%;  background-color:#0000FF;  }  
#nav{  position:relative;  float:left;  width:100px;  background-color:#FFFF00;  }  
#content{  position:relative;  float:left;  width:500px;  }

At the moment the layout is fine but the boxes dont go all the way down to the bottom. There are probably better ways to do it anyway.

Thanks a lot

 

[joeyjojo]

Gman - good tool, though unfortunately doesn't work for this, thanks though

iCraig - faux columns is a very neat solution, thanks. alistapart has a very good article if anyone's interested here

Cheers guys. OCUk forums arent all about hardware after all