Достижение правильно выровненной боковой панели в макете DIV

Question

Я экспериментирую с DIV, чтобы выровнять содержимое моей страницы: http://labs.pieterdedecker.be/test/test.htm

Как видите, с боковой панелью что-то не так. Я выровнял боковую панель DIV по правому краю страницы, выполнив float: right, но когда текст на боковой панели останавливается, основная область принимает ширину, которую должна использовать боковая панель.

Как мне это исправить?

Answer 1

Я предлагаю то, что вы хотите сделать, это разделить div #body в 2 столбца. Во-первых, будет проще, если вы упакуете основной столбец в его собственный div следующим образом:

<div id="body">
    <div id="sidebar">lorem ipsum...</div>
    <div id="main">lorem ipsum...</div>
</div>

, а затем задайте #main div ширину.

Если вам нужно сохранить разметку, то ВСЕ элементы #body, кроме #sidebar, должны иметь ширину.

Другое решение, которое будет работать, если страница статична и ее содержимое не будет «расти», - это установить достаточно большую высоту боковой панели ...

может быть, вы ищете столбцы одинаковой высоты ... для этого есть какой-то другой метод ... просто зайдите в Google или посмотрите на это: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 2

Вы задаете ширину основной области.