Как разметить боковую панель и основное тело без использования «абсолютного» или «плавающего»?
Я хоть убей не могу найти способ заставить эту работу работать.
Если у меня есть 3 блока (левая боковая панель, основная часть и нижний колонтитул), как я могу расположить боковую панель и основное тело рядом друг с другом, не устанавливая их положения как «абсолютные» или плавающие? Выполнение любой из этих опций приведет к тому, что div нижнего колонтитула не будет сдвинут ни одним, ни другим.
Как я могу это сделать независимо от того, что находится перед этими элементами (скажем, другой заголовок div или что-то в этом роде)?
На случай, если это поможет, вот иллюстрация двух случаев, которые я пытаюсь разрешить:
Вот упрощенная версия HTML, которую я сейчас настроил:
<div id = "sidebar"></div>
<div id = "content"></div>
<div id = "footer"></div>
Ответы 3
Вам нужно указать нижний колонтитул, чтобы очистить поплавок:
#footer{
clear: both;
}
Это заставляет его находиться под плавающими элементами.
Другие варианты очистки - слева и справа.
Прямо сейчас вы безнадежны, если не хотите ничего плавать или использовать position: absolute.
Остались только альтернативы:
- используйте display: inline-block для боковой панели и содержимого div (это пока поддерживается не всеми браузерами)
- дождитесь css расширенный модуль макета или какого-либо другого модуля столбца (возможно, это займет вечность)
- вернуться к использованию таблиц
Выполнение любого из этих параметров приводит к тому, что div нижнего колонтитула не выталкивается ни одним, ни другим?
Попробуйте этот инструмент
Спасибо! Это именно то, что было нужно! Я пробовал использовать clear, но на плавающих div, а не на нижнем колонтитуле, теперь он работает так, как ожидалось.