如何在另外两个人之下安排<div>？</div>

Question

我正在尝试实现一个<div>，它有3个<div>个子（见图片）

div1里面有一个图像，它的高度用.css固定，如

.image_inside_div1
{
height:6em;
}

.div1
{
float:left; /* so it fits to the image */
}

.div2
{
width:50%; /* not a great solution. How do I fill the rest (remaining from div1) of outerdiv's width? */
}

.div3
{
/*This is my primary question. How do implement div3 ?*/
width:100%;
position: ???
bottom: 0 ???
height: ???
}

谢谢！

Answer 1

.div3
{
/*This is my primary question. How do implement div3 ?*/
width:100%;
float: left;
clear:both;
}

Answer 2

用另一个div包裹div1和div2。就是这样。

<div>
    <div>
         <div id="div1"></div>
         <div id="div2"></div>
    </div>
    <div id="div3"></div>
</div>

Answer 3

查看这个小提琴http://jsfiddle.net/C6Q46/。重要事项

.outer:after { content: " "; display: block; overflow: hidden; clear: both; height: 0; }
.div2 { overflow: hidden; }
.div3 { width: 100%; clear; both; }