[thelist] help with fluid css layout

chris lists at semioticpixels.com
Tue Jul 19 17:17:07 CDT 2005


Hey Sarah,
I would: 

In the html, 
- add a   or char to the header
- move nav above content

In the css [1]
- float #content left and change it's width to auto
- to #content add max-width: 1200 and use IE's "dynamic" expression to
force IE to recognize max-width.

 hth
-chris

[1]
<style type="text/css">
  body{
  margin:0;
  padding:0;
  font-family:sans-serif;}
  
  #header{
  height:100px;
  background-color:orange;}
  
  #content{
  float: left;
  background-color:pink;
  max-width: 1200px;
  width:expression(document.body.clientWidth > 1200? "1200px": "auto" );
/*force IE 5+ to recognize max-width*/
}
  
  #nav{
  float:left;
  width:250px;
  background-color:green;}
  
  #footer{
  height:50px;
  clear:both;
  background-color:blue;}
</style>

[2] 
<div id="header">&nbsp;</div><!-- /header -->
<div id="nav">
  <ul>
    <li><a href="#">some</a></li>
    ...
  </ul>
</div><!-- /sitenav -->
<div id="content"><p>something ...</p></div>
<div id="footer"></footer>



More information about the thelist mailing list