需要兩個div才能正確排列

Question

Here is a screenshot of how both div's lineup。

左列是，我要排隊到它的右邊的DIV是

而且這兩個div的是內

.content-body { 
    padding:10px 15px; 
    font-size:.8em; 
    font-family:arial; 
    overflow:auto; 
} 

.col-left { 
    float:left; 
    position:relative; 
    overflow:auto; 
    height:100%; 
    width:20%; 
    padding:0 5px 0 0; 
} 

.col-middle { 
    width:auto; 
    height:auto; 
    float:left; 
    xmargin-top:5px; 
    xfont-size:.8em; 
    border:1px solid red; 
    font-family:arial; 
} 

我該如何獲得.COL中等DIV正確排隊？

任何幫助表示讚賞。

Answer 1

更改寬度.col-middle至80％或更低因此兩個div都可以放入其容器內。

您還可以製作.col-middle float right。

Answer 2

添加

clear:none; 

雙方你列的div

和

width:80%; 

你的中間一列應該使他們並排:)

Answer 3

另一個去邊選項（儘管你真的應該給右欄一個寬度）：

.col-middle { 
     ... 
     margin-left: 20%; 
    } 

編輯：如果你給.COL中等左邊界，there's無需浮動，或給它的寬度

Answer 4

COL-中間走的是寬度：100％所以你必須提供寬度：小於80％。

你可以做的另一個解決方案是使寬度：79％，並刪除float：left並使其顯示：table-cell;

.col-middle { 
    width: 79% 
    height:auto; 
    display: table-cell; 
    xmargin-top:5px; 
    xfont-size:.8em; 
    border:1px solid red; 
    font-family:arial; 
}