Float vs. :after

A sample fiddle for demonstrating an issue with using an :after decorative element alongside a floated image.

by Zoltán Adamek

HTML

<body>
    <article>
        <header>
            <div class="post-img-wrap">	<a href="#">
			<img class="thumbnail" src="http://ima.gs/transparent/200x200.png" height="200" width="200" />			</a>

            </div>
            	<h2><a href="#">This is a very long title with a lot of text in here, so long, so long, so veeeery long</a></h2>

        </header>
        <div class="entry-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed velit a sapien varius tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent mattis eros mi. Donec imperdiet fermentum lorem. Donec felis nibh, vehicula vel maximus a, aliquet ac ex. Donec euismod magna in pulvinar lobortis. Cras ut orci sollicitudin, rutrum odio nec, vulputate purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tristique nibh ac aliquam sollicitudin. Praesent ullamcorper tristique tortor, sit amet mattis diam imperdiet a. Vivamus sagittis id diam sed facilisis. Ut auctor orci et felis accumsan, vel sollicitudin quam eleifend. Nam sollicitudin turpis augue, molestie pharetra elit vulputate vitae. Quisque nulla ante, vehicula eget dolor non, dapibus congue neque. Vestibulum convallis eros sed sem volutpat auctor.</p>
        </div>
    </article>
</body>

CSS

div.post-img-wrap img.thumbnail {
    float: left;
    max-width: 200px;
    padding-right: 20px;
    padding-bottom: 10px;
    margin-top: 25px;
}
article h2:after {
    content:"";
    display: block;
    z-index: 1;
    margin: 0;
    width: 10%;
    height: 2px;
    margin-top: 10px;
    left: 0;
    background: #E96656 none repeat scroll 0% 0%;
}