float定位二
xhtml
<div id="center"class="column">
<h1>Thisisthemaincontent.</h1>
</div>
<div id="left"class="column">
<h2>Thisistheleftsidebar.</h2>
</div>
<div id="right"class="column">
<h2>Thisistherightsidebar.</h2>
</div>
CSS
body{
margin:0;
padding-left:200px;/*LCfullwidth*/
padding-right:190px;/*RCfullwidth CCpadding*/
min-width:200px;/*LCfullwidth CCpadding*/
}
.column{
position:relative;
float:left;
}
#center{
width:100;
}
#left{
width:200px;/*LCwidth*/
right:200px;/*LCfullwidth*/
margin-left:-100;
}
#right{
width:190px;/*RCwidth*/
margin-right:-100;
}
/***IEFix***/
*html#left{
left:190px;/*RCfullwidth*/
}
两行三列
xhtml:
<div id="header">这里是顶行</div>
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
CSS:
#header{width:100;height:auto;}
#wrap{width:100;height:auto;}
#column{float:left;width:60;}
#column1{float:left;width:30;}
#column2{float:right;width:30;}
#column3{float:right;width:40;}
.clear{clear:both;}
三行三列
xhtml:
<div id="header">这里是顶行</div>
<div id="wrap">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>
<div id="footer">这里是底部一行</div>
CSS:
#header{width:100;height:auto;}
#wrap{width:100;height:auto;}
#column{float:left;width:60;}
#column1{float:left;width:30;}
#column2{float:right;width:30;}
#column3{float:right;width:40;}
.clear{clear:both;}
#footer{width:100;height:auto;}
PS: 这里列出的是常用的例子，而非研究之用，对一每个盒子，我都没有设置margin,padding,boeder等属性，是因为我个人觉得，含有宽度定位的时候，最好不好用到他们，除非必不得已，因为如果不是这样的话，解决浏览器兼容问题，会让你头疼，而且产生一系列CSS代码，我觉得这样的效率和效果都不好！
CSS布局高级技巧
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE6.0FirefoxOpera等是
真实宽度=width padding border margin
IE5.X
真实宽度=width-padding-border-margin
IE中有浮动对象的双倍距离之BUG（IEDoubledFloat-MarginBug）,这里还需要具体问题具体解决，下面是解决办法www.forest53.com/tutorials/tutorials_show.asp?id=31
很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！
解决的方法是hack
div.content{
width:400px;//这个是错误的width，所有浏览器都读到了
