在html中浮动3个div

我是html编程的新手，但基本上我希望有3个部分，看起来像这样：

|        |        |
|    1   |    2   |
|        |        |
-------------------
|                 |
|        3        |
|                 |

现在，我使用的是bootstrap，我可以使用div类使列彼此相邻。但这只有在我想做专栏的时候才行。例如：

 <div class=col-lg-6>

---

另外，我不能使用固定大小，因为根据我得到的信息，div2可能比div1大，反之亦然。有什么建议吗？

如果不想使用javascript，可以将这些div设置为30%、70%的流体宽度，并将其显示属性设置为“inline block”，将包装div的空白属性设置为“nowrap”。在那之后，添加一个br标签会把第三个div放下来。。或者你可以使用我从未建议过的表格布局。

我不完全确定你在问什么。你想要这样的东西吗？

这是利用Twitter Boostsrap CSS：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6" style="background: gray;">
            Content1
        </div>
        <div class="col-xs-6" style="background: wheat;">
            Content2
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" style="background: tan;">
            Content3
        </div>
    </div>
</div>

内容1
内容2
内容3

谢谢。我想我只是没有好好思考。我没有意识到仅仅像分区行一样把两个分区放进去是多么容易。