title: How to make 2 elements floated side by side, to line up with the banner at the top?
body: <p>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.</p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>.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%;
  </code></pre>
  
  <p>Here's a link to the codepen: 
  <a href="http://codepen.io/Pea92/pen/JdpoqN" rel="nofollow">http://codepen.io/Pea92/pen/JdpoqN</a></p>