我用div布局一个２行３列的的页面，但是我有个凝问？
代码如下
<style type="text/css">
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;background-color:#FF0000;}
#column2{ float:right; width:30%;background-color:#FFFF00;}
#column3{ float:right; width:40%;background-color:#00FF00;}
.clear{ clear:both;}
</style>
<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>

我Ｆ12后　这个布局外观是出来了，但是我发现第二行的第二列和第一列有个空白，请问有什么方法可以解决这个问题，急

我用这个代码，用float布局一个３列的布局，虽然从外观上可以实现，但是不知道，这样布局行不行．
<style type="text/css">
#m{width:100%;height:50%;}
#n{float:left;width:40%;background-color:#CC9900;}
#b{float:left;width:40%;background-color:#FF0000;}
#f{background-color:#999999;}
</style>
<div id="m">
<div id="n">我的爱人</div>
<div id="b">我的朋友</div>
<div id="f"> 我的通货</div>
</div>
上面我试过了，３列都在一条线上，不知道对不对？
上面的那个代码，我是在别人的网页看到的，难道他门弄错了？
还是什么？我用这个就能轻松实现３列的布局．请高手指点？

<style type="text/css">
#m{width:100%;height:50%;}
#n{float:left;width:40%;background-color:#CC9900;}
#b{float:left;width:40%;background-color:#FF0000;}
#f{background-color:#999999;float:left;}
</style>
<div id="m">
<div id="n">这是第一列</div>
<div id="b">这是第二列</div>
<div id="f">这是第三列</div>
</div>
这样也可以．我试了几次，发现在f的规则中，如果加了宽度则会自动换行，不会在一条线中显示，如果把f规则设置成float:right;虽然在同一条线上，但是中间会多了个空白．但是这样就不能设置第３列的宽度了？郁闷　还是没解决，高手哪去了？

<style type="text/css">
#m{width:100%;height:auto;}
#n{float:left;width:40%;background-color:#CC9900;}
#b{float:left;width:40%;background-color:#FF0000;}
#f{background-color:#999999;}
</style>
<div id="m">
<div id="n">这是第一列</div>
<div id="b">这是第二列</div>
<div id="f">这是第三列</div>
</div>
这样就可以自自己解决第３列的高度，
ＯＫ了，我要是有什么理解错了的，见笑了，完全自己摸索的　

有没有css布局的行家，进来指点下小弟．关于布局一个多列并在同一条线上的问题．虽然我自己摸索实现了，但我怕理解错了，有问题．

问题还是出来了，哎，
style type="text/css">
#m{width:100%;height:auto;}
#n{float:left;width:40%;background-color:#CC9900;}
#b{float:left;width:40%;background-color:#FF0000;}
#f{background-color:#999999;}
</style>
<div id="m">
<div id="n">这是第一列</div>
<div id="b">这是第二列</div>
<div id="f">这是第三列</div>
</div>
想上面这样的代码　弄３列出来是可以，但是要４列呢？
就解决不了

[CODE]
<style type="text/css">
#wrap{ width:100%; height:auto;}
#column{ float:left; width:80%;}
#column1{ float:left; width:15%;background-color:#FF0000;}
#column2{ float:left; width:15%;background-color:#00FF00;}
#column3{ float:left; width:15%;background-color:#0000FF;}
#column4{ float:left; width:15%;background-color:#FFFF00;}
#column5{ float:left; width:15%;background-color:#FF00FF;}
#column6{ float:left; width:15%;background-color:#00FFFF;}
</style>

<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div id="column3">这里是第三列</div>
<div id="column4">这里是第四列</div>
<div id="column5">这里是第五列</div>
<div id="column6">这里是第六列</div>
</div>
</div>
[/CODE]

谢谢版主了．

<style type="text/css">
<!--
#all {
     height: 20px;
     width: 900px;
}
#all #all_left {
     height: 20px;
     width: 300px;
     float: left;
     background-color: #00FF00;
}
#all #all_middle {
     background-color: #FFFF00;
     float: left;
     height: 20px;
     width: 300px;
}
#all #all_right {
     background-color: #99FFFF;
     float: right;
     height: 20px;
     width: 300px;
}
-->
</style>
<div id="all">
  <div id="all_left">这里是第一列</div>
  <div id="all_middle">这里是第二列</div>
  <div id="all_right">这里是第三列</div>
</div>
-------------------------------
这样也可以，呵呵