Two 60% elements in a single container - html

Question

I try to copy (sort of) single post presentation design from certain website. Here is how it looks like:
(antyweb.pl)
Apparently they use "A" element and the image is its background. I don't like this idea as it requires to put some dummy text that we won't see anyway.
At this point - let me show how I would like to do it:
What I have is an article element employed as container. Inside there are two other elements with max-width for img and width for div set to 61.8033988749854683%.
How to make it so that the div and the image will be displayed right below the header at the same height?
So far I failed as the div was overlapping over the content below while resizing or when it had enough text in it to make it higher than the image.
Thanks in advance, much love
-edit 1-
first fiddle.
-edit 2-
another container added in order to get text where it belongs to: http://jsfiddle.net/MM5hs/5/
What happens now is that the text from first article overlaps another article: http://jsfiddle.net/MM5hs/6/

Answer 1

You can use floats.
FIDDLE
HTML :
<article>
<header>
<h2>Header</h2>
</header>
<div name="topline">
<div class="img_wrap">
<img src="http://cdn.desktopwallpapers4.me/wallpapers/animals/1920x1200/1/3634-kitten-1920x1200-animal-wallpaper.jpg" />
</div>
<div name="content">
<p>... content ...</p>
</div>
</div>
<div class="auth">
<span>Author:
me,
<time datetime="2014-04-04T01:48:23+00:00">2014-04-04T01:48:23+00:00</time>
</span>
</div>
</article>
CSS :
article {
width: 50%;
margin: auto;
}
div[name*="topline"] {
position:relative;
}
div[name*="content"] {
max-width: 61.8033988749854683%;
margin-left: 38.1966011250145317%;
}
.img_wrap {
width:38.1966011250145317%;
float:left;
overflow:visible;
}
article img {
width: 150%;
}
.auth {
clear:both;
}