DIV+CSS右列宽度自适应布局的不同实现方法

如下图，对右列宽度自适应布局：

c
方法一：
采用左列left浮动，右列不浮动，采用margin-left定位。

<style type="text/css">    *{margin: 0;padding: 0;}    #left{        width:200px;        float: left;        height:100px;        background-color: yellow;    }    #right{      margin-left: 210px;      height:100px;      background-color: orange;    }</style>

方法二：
采用左列向左浮动，右列绝对定位left。

<style type="text/css">    *{margin: 0;padding: 0;}    #left{        width:200px;        float: left;        height:100px;        background-color: yellow;    }    #right{        position:absolute;        left: 210px;        right:0;        height:100px;        background-color: orange;    }</style>

html部分：

<div id="left"></div><div id="right"></div>

附赠阿里巴巴一道笔试题：
实现如下页面布局。核心区域左侧自适应，右侧固定宽度 200px。

CSS部分：

body {margin: 0;}.fn-clear:after {content: " ";clear: both;display: block;font-size: 0;visibility: hidden;height: 0;}.fn-clear {zoom: 1;}.container {padding: 10px;}.header {background: #eee;position: relative;margin-bottom: 10px;}.logo {width: 100px;height: 100px;float: left;background: #f60;}.username {position: absolute;right: 10px;bottom: 10px;}.main {margin-bottom: 10px;}.side-bar { width: 200px;float: right;background: #ccc;}.content {margin-right: 200px;background: #f6f6f6;}.footer { background: #999;}

html部分：

<div class="container">     <div class="header fn-clear">         <div class="logo">logo</div>         <div class="username">[e-mail]</div>     </div>     <div class="main">         <div class="side-bar">menu</div>         <div class="content">左侧内容</div>     </div>     <div class="footer">         footer     </div></div>