CSS border-bottom & float

Question

I have read some other questions with solutions about this problem but I can't seem to fix it within my styles.

I have an div with a header image which has a float: left;. Within that same div I have an article with content that correctly 'wraps' around the image. My problem is within my article I have an h2 with a border-bottom; but although the content of my h2 sits at the right position, the border 'ignores' the float and hovers on the image.

here my example:

My HTML and CSS:

<div class="blog-item">
    <div class="blog-item-image" style="background-image: url('');">
        <span><img src="" alt="">07-08-2014</span>
    </div>
    <article>
        <h2>Titel</h2>
        <p>Paragraph here...</p>


.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%;
}

Thanks

edit: Fiddle: http://jsfiddle.net/xdwsLnuh/1/

Answer 1

It's because of float:left of image, you have two choises :

1. Add float right to article, but you must set a width or he gonna be after img it gonna work because of blog-item's overflow:hidden
2. Or you can set img and article to display:inline-block, in this case remove float from img

Answer 2

add margin left in .blog-item article h2 and remove the width

.blog-item article h2 {
      margin-left:590px; /* width of the '.blog-item-image' + 'right margin' */
}