两列页面布局

页面结构如下形式编码：

<div id="container">

<div class="mainBox">主要内容区域</div>

<div class="sideBox"></div>

<div>

1、两列定宽结构

.mainBox{

    float:left; /*将主要内容区域向左浮动*/

    width:680px;

    height:250px;

} /*设置主要内容区域的宽度为680px、宽度为250px,并居左显示*/

.sideBox{

    float:right; /*将侧边栏向右浮动*/

    width:270px;

    heigth:250px;

}  /*设置侧边栏的宽度为270排序、高度为250px、并居右显示*/

2、两列自适应

.mainBox{
    float:left;
    width:70%;
    color:#FFFFFF;
    background-color:#333333;
}/*设置主要内容区域的宽度为70%*/
.sideBox{
    float:right;
    width:30%;
    color:#FFFFFF;
    background-color:#999999;

}/*将sideBox的宽度修改为30%*/

3、单列定宽单列自适应结构

#container{
    position:relative; /*添加相对定位属性使其子元素的绝对定位属性有参照物*/
    margin:10px 0;
}/*设置页面内容区域设置上下外补丁为10px*/
.mainBox{
    float:left;
    width:auto;/*将mainBox的宽度修改为auto默认值*/
    margin-right:200px; /*外补丁属性为sideBox,留有200px的空白*/
    color:#FFFFFF;
    background-color:#333333;
}/*设置主要内容区域的宽度为auto默认值、背景色及文本颜色，并居左显示*/
.sideBox{
    position:absolute; /*设置sideBox为绝对定位，相对于其父元素#container定位*/
    top:0px; /*相对其父元素的顶部0px绝对定位*/
    right:0px;/*相对其父元素的右边0px绝对定位*/
    float:right;
    width:200px;
    margin-left:-200px;
    color:#FFFFFF;
    background-color:#999999;

}/*设置侧边栏的宽度为200px、背景色及文本颜色，并居右显示*/

4、两列等高

第一种方式：使用背景图片平铺（背景模拟）

#container{

    width:960px;
    background:url(images/2.jpg)repeat-y 0 0;
}/*设置页面内容区域的宽度为960px,并设置背景图片以Y轴坐标平铺*/
.mainBox{
    float:left; /*将主要内容区域向左浮动*/
    width:650px;
}
.sideBox{
    float:right;/*将侧边栏向右浮动*/
    width:280px;

}

第二种方式：负边距实现

#container{
    width:960px;
    overflow:hidden;
}/*设置页面内容区域的宽度是960px*/
.mainBox{
    float:left; /*将主要内容区域向左浮动*/
    width:650px;
    background-color:#333333;
}
.sideBox{
    float:right;/*将侧边栏向右浮动*/
    width:280px;
    background-color:#AAAAAA;

}

.mainBox, .sideBox{
    padding:0 5px;
    color:#FF0000;
    margin-bottom:-9999px;
    padding-bottom:9999px;

}

第三种方式：边框模拟

#container{
    position:relative; /*为其子元素的定位到具体可参照的对象*/
    width:960px;
    overflow:hidden;
}/*设置页面内容区域的宽度是960px*/
.mainBox{
    float:left; /*将主要内容区域向左浮动*/
    width:650px;
    background-color:#333333;
    border-right:280px solid #AAAAAA; /*将边框的宽度值设置与侧边栏的宽度相同，并用边框色“取代”侧边栏的背景色*/
    background-color:#333333;
}
.sideBox{
    float:right; /*将侧面区域向右浮动*/
    position:absolute;
    top:0;
    rigth:0; /*使用定位方式将侧边栏绝对定位在内容区域的右上方*/
    width:280px;
    background-color:#FFFFFF;

}

第四种：使用javascript脚本语言

<script type="text/javascript">
<!--
mh=document.getElementById("mainBox");
sh=document.getElementById("sideBox");
if(mh.clientHeight<sh.clientHeight)
{
    mh.style.height=sh.clientHeight+"px";
}else{
    sh.style.height=mh.clientHeight+"px";
}
-->
</script>