DIV+CSS布局

宽度自适应两列布局
<!DOCTYPE html>
<html>
<head>
    <meta charset="gbk">
    <title>宽度自适应两列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
    height:41px;
    background:blue;
}
.main-left{
    10%;
    height:800px;
    background:red;
    float:left;
}
.main-right{
    90%;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    clear:both;
    height:50px;
    background:gray;
}

ul{
    list-style-type:none;
    background-color:#333;
    overflow:hidden;
}
li{
    float:left;
}
li a, .dropbtn{
    display:inline-block;
    color:white;
    text-align:center;
    padding:10px 8px;
    text-decoration:none;
    font-family:华文新魏;
    font-size:18px;
}

li a:hover, .dropdown:hover .dropbtn{
    background-color:#111;
}

.dropdown{
    display:inline-block;
}

.dropdown-content{
    min-140px;
    background-color:#FFE4C4;
    position:absolute;
    display:none;
    box-shadow:0px 4px 6px 0px rgba(0,0,0,0.2);
    font-family:华文新魏;
}

.dropdown-content a{
    color:black;
    padding:4px 16px;
    text-decoration:none;
    display:block;
}

.dropdown-content a:hover{
    background-color:#F1F1F1;
}

.dropdown:hover .dropdown-content{
    display: block;
}
</style>
</head>
<body>
<div id="herder">
    <div class="dropdown">
        <a href="#" class="dropbtn">网址大全</a>
        <div class="dropdown-content">
            <a href="http://www.baidu.com">百度首页</a>
            <a href="http://www.qq.com">腾讯QQ</a>
            <a href="http://www.msn.com.cn">MSN</a>
        </div>
    </div>
    <div class="dropdown">
        <a href="#" class="dropbtn">业务管理</a>
        <div class="dropdown-content">
            <a href="http://www.baidu.com">百度首页</a>
            <a href="http://www.qq.com">腾讯QQ</a>
            <a href="http://www.msn.com.cn">MSN</a>
        </div>
    </div>
    <div class="dropdown">
        <a href="#" class="dropbtn">信息中心</a>
        <div class="dropdown-content">
            <a href="http://www.baidu.com">百度首页</a>
            <a href="http://www.qq.com">腾讯QQ</a>
            <a href="http://www.msn.com.cn">MSN</a>
        </div>
    </div>
</div>
<div class="main-left">左列</div>
<div class="main-right">右列</div>
<div id="footer111">页脚</div>
</body>
</html>
左列
右列
页脚