做了一道猫厂很经典的前端笔试题，解决了一直以来在两列布局的认识上思考太少的毛病。
题目要求是右侧aside固定宽度200px，左侧content自适应。
本来直接用float，发现aside总是会被“挤”到content以下、footer以上的位置，debug了好久最终还是看了大牛的博客才意识到这个问题所在。
基本思路是：
①content宽度不设，让它默认auto，设一下高度（好看）
②aisde在右边那就 float:right ，设置固定宽度200px
③重点！！给content设置aside方向（本题右）上的maigin，且margin值要足够放下aside
④超重点，也是坑人的地方！！！把body中代表aside的div提到content这个div的前面，这样浏览器渲染content的时候它就正好“叠”到了aside的左边距上，完美并排！
效果图
实现代码
（不同屏幕不同浏览器效果不同，未做多浏览器兼容，仅供参考思路）
body{
margin: 0;
padding: 0 5px;
}
#header{
width: 100%;
height: 18%;
border: green 1px solid;
margin-bottom: 1%;
}
#logo{
width: 80px;
height: 80px;
border: red 1px solid;
float: left;
margin-top: 20px;
margin-left: 20px;
}
#username{
width: 200px;
height: 30px;
border: black 1px solid;
float: right;
margin-top: 75px;
margin-right: 20px;
text-align: right;
}
#main{
overflow: hidden;
}
#content{
height: 430px;
border: blue 1px solid;
margin-right: 240px;
}
#aside{
width: 200px;
height: 30px;
border: red 1px solid;
float: right;
}
#footer{
width: 100%;
height: 9%;
border: black 1px solid;
clear: both;
margin-top: 1%;
}
<html><head> <title>两列布局--右侧定宽左侧自适应</title><link rel="stylesheet" type="text/css" href="right200px_and_leftauto.css"></head><body> <div id="header"> <div id="logo">Logo</div> <div id="username">用户名</div> </div> <div id="main"> <div id="aside">aside-固定宽度200px</div> <div id="content">content-宽度自适应</div> </div> <div id="footer">footer</div></body></html>