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:80%;
margin:10px auto;
}
#content{
height:500px;
}
#left{
height:500px;
background-color:#0F0;
border:1px solid red;
margin-left:104px;
}
#midd{
float:left;
height:500px;
width:200px;
border:1px solid #F0F;
background-color:#00F;
padding-right:5px;
}
#right{
height:500px;
border:1px solid green;
background-color:#FF0;
margin-right:104px;
}
#varleft{
width:50%;
float:left;
margin-left:-104px;
}
#varright{
width:50%;
float:right;
margin-right:-104px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="varleft">
<div id="left"></div>
</div>
<div id="midd"></div>
<div id="varright">
<div id="right"></div>
</div>
</div>
<div id="footer"></div>
</body>
