Как расположить боковую панель и основную часть без использования «absolute» или «float»?

Question

Я не могу на всю жизнь найти способ сделать эту работу.

Если у меня 3 деления (левая боковая панель, основное тело и нижний колонтитул), как я могу расположить боковую панель и основное тело рядом друг с другом, не устанавливая их положения как «абсолютные» или не перемещая их? Выполнение любого из этих параметров приводит к тому, что div нижнего колонтитула не будет сдавлен одним или другим.

Как я могу сделать это независимо от того, что предшествует этим элементам (скажем, другой заголовок div или что-то еще)?

Если это поможет, вот иллюстрация двух случаев, которые я пытаюсь учесть:

Вот упрощенная версия HTML, которую я сейчас настроил:

<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>

Answer 1

Вам нужно указать нижний колонтитул, чтобы очистить поплавок:

#footer{
 clear: both;
}

Это заставляет его находиться под плавающими элементами.

Другие варианты очистки - слева и справа.

Answer 2

Если какой-либо из этих параметров приведет к тому, что div нижнего колонтитула не будет смещен одним или другим?

Попробуйте этот инструмент

Answer 3

Прямо сейчас вы совершенно безнадежны, если не хотите ничего плавать или использовать положение: абсолютное.

Остались только следующие альтернативы:

• использовать display: inline-block для боковой панели и содержимого div (это пока не поддерживается всеми браузерами)
• дождитесь расширенного модуля макета css или какого-либо другого модуля столбца (возможно, потребуется навсегда)
• вернуться к использованию таблиц