单个容器中有两个60％的元素

Question

我尝试从某个网站复制（排序）单个帖子演示设计。这是它的样子：

（antyweb.pl）

显然他们使用“A”元素，图像是它的背景。我不喜欢这个想法，因为它需要放一些我们不会看到的虚拟文本。

此时 - 让我说明我想怎么做：

我所拥有的是用作容器的article元素。在其中还有另外两个元素，其中img的最大宽度和div的宽度设置为61.8033988749854683%。

如何使div和图像显示在标题正下方相同的高度？

到目前为止，我失败了，因为div在重新调整大小时或者当文本中有足够的文本使其高于图像时重叠在下面的内容上。

提前致谢，非常喜欢

-edit 1 -

首先fiddle。

-edit 2 -

添加了另一个容器，以便获取它所属的文本：http://jsfiddle.net/MM5hs/5/

现在发生的事情是，第一篇文章中的文字与另一篇文章重叠：http://jsfiddle.net/MM5hs/6/

Answer 1

您可以使用floats。

<强> FIDDLE

HTML：

 <article>
        <header>
            <h2><a href="#">Header</a></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: 
                <a href="#" title="zobacz wszystkie posty tego autora">me</a>, 
                <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;
}