title: CSS border-bottom & float
body: <p>I have read some other questions with solutions about this problem but I can't seem to fix it within my styles.</p>
  
  <p>I have an <code>div</code> with a header image which has a <code>float: left;</code>.
  Within that same <code>div</code> I have an <code>article</code> with content that correctly 'wraps' around the image.
  My problem is within my <code>article</code> I have an <code>h2</code> with a <code>border-bottom;</code> but although the content of my <code>h2</code> sits at the right position, the border 'ignores' the <code>float</code> and hovers on the image.</p>
  
  <p>here my example: </p>
  
  <p><img src="https://i.stack.imgur.com/lAZAz.png" alt="border-ignores float"></p>
  
  <p>My HTML and CSS:</p>
  
  <pre><code>&lt;div class="blog-item"&gt;
      &lt;div class="blog-item-image" style="background-image: url('');"&gt;
          &lt;span&gt;&lt;img src="" alt=""&gt;07-08-2014&lt;/span&gt;
      &lt;/div&gt;
      &lt;article&gt;
          &lt;h2&gt;Titel&lt;/h2&gt;
          &lt;p&gt;Paragraph here...&lt;/p&gt;
  
  
  .blog-item {
      position: relative;
      width: 100%;
      padding: 55px 10%;
      background-color: #f6f6f6;
      min-height: 500px;
      overflow: hidden;
  }
  .blog-item .blog-item-image {
      background-position: center center;
      background-repeat: no-repeat;
      position: relative;
      width: 535px;
      height: 385px;
      margin-right: 55px;
      margin-bottom: 44px;
      float: left;
  }
  .blog-item article h2 {
      color: #009640;
      font-font: DINCond-BlackAlternate;
      font-weight: bold;
      border-bottom: 2px solid #c8c7c7;
      padding-bottom: 10px;
      width: 42%;
  }
  </code></pre>
  
  <p>Thanks</p>
  
  <p>edit:
  Fiddle: <a href="http://jsfiddle.net/xdwsLnuh/1/" rel="nofollow noreferrer">http://jsfiddle.net/xdwsLnuh/1/</a></p>