如何使2個元素並排浮動，以排列在頂部的橫幅？

Question

我正在構建一個簡單的網站佈局。我在頂部有一個橫幅，底部有一個div box和一個圖像，都浮在左邊。我想讓標題橫幅右側的內聯女性形象。我嘗試過使用保證金，但它要麼使頁面脫離頁面，要麼不完全排列。

這裏的CSS：

.topbanner { 
width:100%; 
background-color:black; 
padding:1%; 
margin-top:1%; 
} 

#nav { 
text-align:center; 

} 

.leftcolumn { 
width:40%; 
height:230px; 
background-color: grey; 
border: solid red 3px; 
margin-top:2%; 
float:left; 

} 

.leftcolumn p { 
color:white; 
text-align:center; 
padding:13%; 
font-style:italic; 
font-size:20px; 
} 

.woman { 
width:55%; 
height:230px; 
border: solid black 3px; 
margin-top:2%; 
float:left; 
margin-left:4%; 

這裏給codepen鏈接： http://codepen.io/Pea92/pen/JdpoqN

Answer 1

只是浮在右列權

.rightcolumn { 

width:55%; 
height:230px; 
border: solid black 3px; 
margin-top:2%; 
float:right; 
margin-left:4%; 
} 

這裏添加這個（取寬出）

.topbanner { 

    background-color:black; 
    padding:1%; 
    margin-top:1%; 
} 

view my fiddle

Answer 2

在這裏，我爲你編輯了CSS。

.woman { 
    width: 55%; 
    height: 230px; 
    border: solid black 3px; 
    margin-top: 2%; 
    float: right; 
    margin-left: 3%; 
} 

你只需要浮動。女士（圖片）的權利，也許減少的餘裕至3％。

看起來左欄和圖像的寬度應該增加到99％，但由於給出左欄和圖像的3px邊框，它可能已經超過了100％。