1-3-1左右固定中间动态的布局
<title>1-3-1左右固定中间动态的布局</title>
<style type="text/css">
#header,#content,#footer{
background-color:#ccc;
border:1px solid #0ca;
height:30px;
width:100%;
margin:10px auto;
}
#content{
height:500px;
}
#left{
width:100px;
height:500px;
float:left;
background-color:#0F0;
border:1px solid red;
}
#midd{
height:500px;
border:1px solid #F0F;
background-color:#00F;
padding-right:1px;
margin-left:104px;
}
#right{
width:100px;
height:500px;
border:1px solid green;
background-color:#FF0;
float:right;
}
#varleft{
margin-left:104px;
}
#varcontent{
width:100%;
float:left;
margin-left:-104px;
}
#varmidd{
width:100%;
float:right;
margin-left:-104px;}
</style>
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="varcontent">
<div id="varleft">
<div id="left"></div>
<div id="varmidd">
<div id="midd"></div>
</div>
</div>
</div>
<div id="right"></div>
</div>
<div id="footer"></div>
</body>
