CSS столбцов, стеки на изменении размера, используя только поплавки

Question

Я пытаюсь добиться этого, используя только поплавки:

|A******* B******************| 
|*300px * * auto   *| 
|*  * *     *| 
|******** *******************| 

|A*******  | 
|*300px *  | 
|*  *  | 
|********  | 
|B************| 
|* auto  *| 
|*   *| 
|*************| 

Блок Б должен взять оставшееся пространство и идти под блок А, когда она меньше 500px свободного пространства для этого. Я пробовал много комбинаций, отрицательные margin решений, но все без успеха.

Проблема в том, что css-поплавки могут спускаться (стекать), когда нет свободного места, но только если указан width. Когда width не указан, блок занимает оставшееся пространство (и это то, что мне нужно), но не может складываться. И мне нужно и функции для блока B: взятие оставшегося пространства и переход под A на меньшие экраны.

Что вы предлагаете для этого без медиа-запросов и других функций, не поддерживаемых в старых браузерах (IE8 + и без JS)?

Начальная точка:

<div id="blockA"> 
    blockA 
</div> 
<div id="blockB"> 
    <p>blockB</p> 
    <p id="stopper">stopper</p> 
</div> 

#blockA { 
    border: 1px solid powderblue; 
    width: 300px; 
    float: left; 
} 
#blockB { 
    border: 1px solid khaki; 
    margin-left: 300px; 
} 
#blockB > p#stopper { 
    width: 500px; 
    border: 1px solid blue; 
} 

См решение ниже.

Answer 1

Решение: контейнер с float: left и blockB с overflow: hidden

.container { 
    clear: left; 
} 
.blockA { 
    border: 1px solid red; 
    width: 300px; 
    float: left; 
} 
.blockB { 
    border: 1px solid blue; 
    min-width: 500px; 
    overflow: hidden; 
} 

<div class="container"> 
    <div class="blockA">blockA</div> 
    <div class="blockB">blockB</div> 
</div> 

Испытано в IE8 и FF, работает точно так же, как описано в моем вопросе.

Answer 2

Это поможет:

#blockA { 
    border: 1px solid powderblue; 
    width: 100px; 
    float: left; /*YOU WERE NOT FLOATING THE DIV B*/ 
}