#sidebar {
float: left;
width: 200px;
margin-left: -200px;/*==此值等于左边栏的宽度值==*/
position: relative;
}
#main {
float: left;
}
#maing,
#sidebar{
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
方法二
HTML Markup
复制代码
<div id=”container” >
<div id=”left” class=”aside” >Left Sidebar </div>
<div id=”content” class=”section” >Main Content </div>
</div>
CSS Code
复制代码
<style type=”text/css” >
*{margin: 0;padding: 0;}
#container {
overflow: hidden;
}
#left {
background: #ccc;
float: left;
width: 200px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#content {
background: #eee;
margin-left: 200px;/*==此值等于左边栏的宽度值==*/
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#left,
#content {
min-height: 200px;
height: auto !important;
height: 200px;
}
</style>
方法三：
HTML Markup
复制代码
<div id=”container” >
<div id=”content” >Main Content </div>
<div id=”sidebar” >Left Sidebar </div>
</div>
CSS Code
复制代码
*{margin: 0;padding: 0;}
#container{
background-color:#0ff;
overflow:hidden;
padding-left:220px; /* 宽度大小等与边栏宽度大小*/
}
* html #container{
height:1%; /* So IE plays nice */
}
#content{
background-color:#0ff;
width:100%;
border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/
margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
float:right;
}
#sidebar{
background-color:#f00;
width:220px;
float:right;
margin-left:-220px;/* 宽度大小等与边栏宽度大小*/
}
#content,
#sidebar {
min-height: 200px;
height: auto !important;
height: 200px;
}
方法四：
HTML Markup
复制代码
<div id=”container2″ >
<div id=”container1″ >
<div id=”col1″ >Left Sidebar </div>
<div id=”col2″ >Main Content </div>
</div>
</div>
CSS Code
复制代码
*{padding: 0;margin:0;}
#container2 {
float: left;
width: 100%;
background: orange;
position: relative;
