Question

I need the following layout of divs:

+-----------+-----------+
|           |           |
|   Div A   |           |
|           |           |
|           |           |
+-----------+   Div C   |
|           |           |
|    Div B  |           |
|           |           |
|           |           |
+-----------+-----------+

I searched hard, but all I have found are lots of similar questions about placing divs in two columns (like this and this). None seem to deal with this exact problem.

I’ve tried using float:left and clear:both, but I just can’t get anywhere.

Obviously it can be achieved using tables, but isn’t it bad practice to use tables for layout. Can it be done without?

Answer 1

This should work

<div style="width:100%">
<div id="topLeft" style="float:left; width:50%; height:200px">
</div>
<div id=topRight style="float:right; width:50%; height:400px">
</div>
<div id="bottomLeft" style="float:left; width:50%; width:200px">
</div>
</div>