title: Create one div with text and image separate?
body: <p>I am currently coding my first website, and one of the elements I have are "story blocks" that are a fixed width and split between images and text, but all in one div. Here is an image for reference: <a href="http://i.imgur.com/FAbi4xF.jpg?1" rel="nofollow">http://i.imgur.com/FAbi4xF.jpg?1</a>.</p>
  
  <p>Let me explain the different parts going on here: an image with a slight black overlay as well as text on the left, and then text describing the story on the right. Currently, I have an inefficient way of creating this element, involving two separate divs and disparate headers for the story titles. Here is the HTML:</p>
  
  <pre><code>&lt;div class="story-image"&gt; 
    &lt;h2 class="story-head"&gt;STORY TITLE&lt;/h2&gt;
    &lt;img src="http://gearpatrol.com/wp-content/uploads/2012/06/microsoft-surface-gear-patrol1.jpg"/&gt;
  &lt;/div&gt;
   &lt;!--this ends the image and title part, begins the text part--&gt;
  &lt;div class="story-text"&gt;
    &lt;h5&gt;Story description.&lt;/h5&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.story-image {
      position: inherit;
      background-color: rgba(0,0,0,.39); 
      margin-left: 58px;
      margin-bottom: 4px;
      float: left;
      overflow: hidden;
      width: 220px;
      height: 100px;}
  .story-head {
      position: absolute;
      text-align: center;
      vertical-align: middle;
      color: white;
      font-weight: 800;
      width:220px;
      line-height:100px;}
  .story-text {
      background-color: white;
      width: 200px;
      line-height: 100px;
      height:100px;
      float: left;}
  .story-text h5 {
      padding-left:8px;
      padding-top: 20px;
      vertical-align: middle; }
  </code></pre>
  
  <p>As you can see, it isn't the most efficient way of doing this sort of thing and can cause issues where the two elements break away from eachother (example here: <a href="http://i.imgur.com/eBF8Rwa.png" rel="nofollow">http://i.imgur.com/eBF8Rwa.png</a>). I cannot figure out a way to have one single div that is divided between image and text. Does anyone know of a possible way to do this? Thank you and happy holidays!</p>