DIV+CSS常用网页布局技巧！

HTML Markup

  <div id="left">Left sidebar</div>
  <div id="content">Main Content</div>

CSS Code

  <style type="text/css">

   *{
    margin: 0;
    padding: 0;
   }

   #left {
    float: left;
    width: 220px;
    background-color: green;
   }

   #content {
    background-color: orange;
    margin-left: 220px;/*==等于左边栏宽度==*/
   }
  </style>

HTML Markup

<div id="wrapper" class="clearfix">
<div id="content-wrapper">
       <div id="content">
       左边的内容
       </div>
</div>
<div id="nav">
    右边的内容
</div>
</div> 

CSS Code

body {
padding: 0;
margin: 0;
}

#wrapper {
width: 960px;
border: 1px solid #333;
margin: 0 auto;
}

#nav {
width: 200px;
float: right;
}

#content-wrapper {
margin-right: -200px;
float: left;
width: 100%;
}

#content {
margin-right: 200px;
padding: 0 10px;
}

.clearfix:after {
height: 0;
content: ".";
display: block;
clear: both;
visibility: hidden;
}  

HTML Markup

div class="left">我是left</div>
<div class="right">我是right</div>
<div class="center">我是center</div>

CSS Code

body,div{ margin:0; padding:0;}
div{ height:200px; color:#F00;}
.left{ float:left; width:100px; background:#00f; _margin-right:-3px;}
.right{ float:right; width:100px; background:#0f0; _margin-left:-3px;}
.center{ background:#333; margin:0 100px; _margin:0 97px;}

IE6中的3px间隙bug

在ie6中，我们看到各列之间有一条3px的间隔，这是只有IE6才有的问题。如果中间那列的margin-left和margin-right都为0的话，则只要把左列的margin-right设为-3px,右列的margin-left设为-3px就行了。但如果把中间列的margin-left和margin-right分别为左右两列的宽度时，即使把左列的margin-right设为-3px,右列的margin-left设为-3px也还是没有效果。这时候还得把中间列的margin-left设为左列宽度-3px,margin-right设为右列宽度-3px才行