两列布局实现

方法1, 浮动布局

Sidebar 设置为浮动, Content Body 的 margin 设置为 Sidebar 的宽度

HTML

<div class='sidebar'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class='contentBody'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
`</pre>

### CSS

<pre>`*{
margin:0;
padding:0
}
.sidebar{
float:left;
width: 220px;
background-color: #ccc;
}
.contentBody{
margin-left: 220px;
}
`</pre>

## 方法2, 浮动和负边距

### HTML

<pre>`&lt;div class='sidebar'&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
&lt;/div&gt;
&lt;div class='contentBody'&gt;
    &lt;div class='contentInner'&gt;
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    &lt;/div&gt;
&lt;/div&gt;
`</pre>

### CSS

<pre>`.sidebar{
float:left;
width: 220px;
margin-right: -100%;
background-color: green;
}
.contentBody{
float:left;
width:100%;
}
.contentInner{
margin-left: 220px;
}
`</pre>

# 等高实现

## Demo1

### HTML

<pre>`&lt;div class='container'&gt;
    &lt;div class='wrapper'&gt;
        &lt;div class='sidebar'&gt;SideBar&lt;/div&gt;
        &lt;div class='content'&gt;Main Content&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
`</pre>

### CSS

<pre>`.container{
background-color:#ccc;
}
.wrapper{
display:inline-block; //保证 wrapper 的最小高度不小于被 float 的 sidebar
border-left: 200px solid #333; //等于 sidebar 宽度
vertical-align:bottom
}
.sidebar{
float:left;
width: 200px;
margin-left: -200px; //等于 wrapper 的 border-left 宽度
}
.sidebar, .content{
min-height: 200px;
height: auto !important;
height:200px;
}
`</pre>

## Demo2

### HTML

<pre>`&lt;div class='container'&gt;
    &lt;div class='sidebar'&gt;SideBar&lt;/div&gt;
    &lt;div class='content'&gt;Main Content&lt;/div&gt;
&lt;/div&gt;
`</pre>

### CSS

<pre>`.sidebar{
background-color:#ccc;
float:left;
width:200px;
margin-bottom:-99999px;
padding-bottom:99999px;
}
.content{
background-color: #eee;
margin-left:200px;
margin-bottom:-99999px;
padding-bottom:99999px;
}
.sidebar, .content{
min-height: 200px;
height:auto!important;
height:200px;
}
`</pre>

## Demo3

### HTML

<pre>`&lt;div class='container'&gt;
    &lt;div class='wrapper'&gt;
        &lt;div class='col1'&gt;Left Col&lt;/div&gt;
        &lt;div class='col2'&gt;Right Col&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
`</pre>

### CSS

<pre>`.container{
float:left;
width:100%;
background:orange;
position:relative;
overflow:hidden;
}
.wrapper{
float:left;
width:100%;
background:green;
position:relative;
left:200px;
}
.col1{
width:200px;
float:left;
position:relative;
margin-left:-200px;
}
.col2{
position:relative;
margin-right:200px;
}