如何使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％。