如何使2个元素并排漂浮，并与顶部的横幅对齐？

Question

I'm building a simple website layout. I have a banner at the top, and a div boxe and an image underneath it, both floated to the left. I want to get the image of the woman inline with the right side of the header banner. I've tried using margin, but it either makes it go off the page, or it doesn't quite line up.

Here's the 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%;

Here's a link to the codepen: http://codepen.io/Pea92/pen/JdpoqN

Answer 1

Just float the right column right

.rightcolumn {

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

here add this (take the width out)

.topbanner {

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

view my fiddle

Answer 2

Here, I edited the CSS for you.

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

You just need to float .woman (image) right and perhaps decrease the margin-left to 3%.

It seems like the width of the left column and the image should have added up to 99%, but it might have exceeded 100% due to the 3px borders given to the left column and image.