三行二列居中高度自适应布局

<html>
<head>
<style type="text/css">
body{
background:#999;
text-align:center;
color: #333;
font-family:arial,verdana,sans-serif;
}
#header{
width:776px;
margin-right: auto;
margin-left: auto; 
padding: 0px;
background: #EEE;
height:60px;
text-align:left;
}
#contain{
    margin-right: auto;
    margin-left: auto;
    width: 776px;
}
#mainbg{
    width:776px;
    padding: 0px;
    background: #60A179;
    float: left;
}

#right{
float: right; 
margin: 2px 0px 2px 0px; 
padding:0px; 
width: 574px; 
background: #ccd2de;
text-align:left;
}
#left{
float: left; 
margin: 2px 2px 0px 0px; 
padding: 0px; 
background: #F2F3F7; 
width: 200px;
text-align:left;
}
#footer{
clear:both;
width:776px;
margin-right: auto;
margin-left: auto; 
padding: 0px;
background: #EEE;
height:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="contain">
<div id="mainbg">
     <div id="right">
           <div class="text">right<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
     </div>
     <div id="left">
           <div class="text">left</div>
     </div>
</div>
</div>
<div id="footer">footer</div>

</body>
</html>

posted on 2007-10-23 14:56  天涯人  阅读(208)  评论(0)  编辑  收藏  举报

导航