Основной стиль для создания этого лайота

Question

Это похоже на таблицу, но я бы хотел реализовать ее, используя только CSS.

Какой самый верный стиль для этого макета, который работает со всеми браузерами?

        _________
        | 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

Вам нужен еще один div и еще два класса, но это очень просто:

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;
}

Нажмите здесь для примера .