自適應寬度的左右結構DIV+CSS

<div class="page">
        <div class="header">
            <div id="title">
                <h1>頂部</h1>
            </div>
        </div>
        <div class="MainContainer">
            <div class="sidebar">
            側邊欄
            </div>
            <div class="main">
                內容
            </div>
            <div class="clear"></div>
        </div>

 

css 

.header{border-bottom:1px solid #ccc;margin-bottom:5px;}
.MainContainer{min-width: 960px;max-width: 1600px;}
.sidebar{width:180px;float:left;margin-right: -175px;border-right:1px solid #ccc;min-height:500px;padding:5px;}
.main{float:left;margin-left: 180px;padding:5px;}