[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"> </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