Question

It looks like a table, but I’d like to implement it by using only CSS.

What is the most robust style for this layout that works with all browser?

        _________
        | A |__b__|
        |_A_|__c__|

<div class='container'>
        <div class='sectA'> A </div>
    <div>
        <div class="sectB"> b </div>
        <div class="sectC"> c </div>
    </div>
</div>

Answer 1

You need one more div and two more classes, but it’s very easy:

HTML

<div class='container'>
        <div class='sectA'> A </div>
    <div class="separator">
        <div class="sectB"> b </div>
        <div class="sectC"> c </div>
    </div>
    <div class="clear">&nbsp;</div>
</div>

CSS:

.container div.sectA
{
    float: left;
    width: 100px;
    height: 100px;
    border: 1px dotted #000;
}

div.separator
{
    float: left;
}

div.sectB,
div.sectC
{
    float: none;
    width: 100px;
    height: 50px;
    border: 1px dotted #f00;
}

.clear
{
    clear: both;
}

Click here for an example.