Два DIV`а в "обратном" порядке

[white[43]]

Приветствую всех. Есть некая проблема, с которой не могу разобраться. А именно... Есть конструкция вида:

<div id="maindiv">
        <div id="body"></div>
        <div id="navigation"></div>
</div>

И есть мысль разместить на странице их так, чтобы navigation (меню ссылок) было слева от body (содержимое страницы). Нашёл вариант, как это сделать с помощью задания ширины каждого в процентах, но это не совсем вяжется с моей идеей, в которой navigation имеет фиксированную ширину в 180px, а body заполняет все оставшееся свободное место.

При попытке задать фиксированную ширину меню ссылок и оставить процентную ширину остальному получается не совсем айс.

Вот так выглядит недорешение с заданием в процентах.

div#navigation { width: 19%; }
div#body { float: right; width: 80%; }

Есть ли решение для моей идеи и как оно будет выглядеть? Спасибо.

upd:
Абсолютное позиционирование не вариант.

upd:
Если уж совсем плохо, можно и с абсолютным позиционированием, но тогда встаёт большой... вопрос с подвалом, который смещается вверх из-за выпадания одного блока из потока.

Вот так выглядит моё промежуточное решение с абсолютным позиционированием (и дополнительным выделением бордеров для наглядности).

<style type="text/css">
#logo, #links, div#footer { text-align: center; }
#logo { height: 180px; background-image: url( 'Бла-бла-бла' ); }
#links, #footer { height: 28px; background-image: url( 'Аналогично...' ); }

#maindiv { position: relative; }
#navigation { position: absolute; top: 0px; padding: 10px; width: 160px; }
#body { margin-left: 180px; padding: 10px; }

.border { border: 1px black solid; }
</style>

<div id="logo" class="border">logo</div>
<div id="links" class="border">links</div>
<div id="maindiv">
        <div id="body" class="border">body</div>
        <div id="navigation" class="border">navigation</div>
</div>
<div id="footer" class="border">footer</div>

Вот как сия конструкция будет выглядеть в IE6/7 - не знаю, ибо под рукой ни того, ни другого нет. На всех остальных (Opera 9/10, FF2/3, Chrome 2, IE8 (плюс в режиме стандартов IE7)) замечательно.

И как тогда прибить подвал к низу не с помощью JavaScript, а возвожностями CSS только?

[wall66]

используйте float для меню и padding для контента
наилучшее их сочетание можно выявить опытным путем

[white[43]]

Сообщение от wall66

используйте float для меню и padding для контента
наилучшее их сочетание можно выявить опытным путем

Спасибо за ответ.
Но. Float для меню и margin для контента я использовал при "прямом" порядке DIV`ов, когда физически меню располагается раньше контента. И это помогало. В данном же случае float элементарно не сработает, т.к.меню находится уже после контента.

[wall66]

Сообщение от white[43]

Спасибо за ответ.
Но. Float для меню и margin для контента я использовал при "прямом" порядке DIV`ов, когда физически меню располагается раньше контента. И это помогало. В данном же случае float элементарно не сработает, т.к.меню находится уже после контента.

в таком случае используйте float и для того и для другого

[sa_t_an]

http://xhtml.ru/instr/3col_creator/

Простейший конструктор (на скору руку) попробуйте...

А вообще попробуйте найти статью 'Борьба с прыгающими блоками в IE'...
Там хорошо описана и решена проблема 2 DIV в разных браузерах.

[white[43]]

wall66
Пробовал и с одним float`ом, и с двумя. Проблема в том, что при наполнении контентом этот блок стремится растянуться на всю ширину экрана, сдвигая меню ссылок вниз. Всё это происходит до тех пор, пока не укажешь ему ширину, вот тогда меню возвращается на один уровень с контентом. Но. Контент должен занимать всё свободное место справа от ссылок, а не иметь указанный ему размер.

sa_t_an
Спасибо за ответ.
Ссылку посмотрел. Занятно, но там генерируется "прямой" порядок, который у меня сейчас уже есть. Мне же нужен "обратный". Статьи поискал и видеоматериал поглазел. Если честно, так и не смог понять, как это мне может помочь. Если намекнёте, буду признателен.

To all
Наверное, придётся остаться на варианте с абсолютным позиционированием. Закачал виртуальную машинку с IE6, погонял там образцы - всё замечательно. Но тогда каким образом прибить подвал к низу документа?

Посмотрел в интернетах какие там есть варианты, но как-то они неработоспособны: либо вообще не имеют эффекта, либо имеют избыточный (подвал уходит ниже видимой области браузера).

[sa_t_an]

http://kirov.fm/

Вам надо вот так, только навигацию слева?

[white[43]]

sa_t_an
Вы можете легко представить себе то, что мне необходимо, если посмотрите последний кусок кода в первом сообщении и обратите внимание на физическое расположение в коде DIV`ов body и navigation, а также на то, как они расположены уже на странице.

http://pic.ipicture.ru/uploads/090815/f5l7zMV1JE.png

А по сайту, да, у них схожая идея, только у меня навигация должна быть слева.

[sa_t_an]

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

Верстка в две колонки с прижатым к низу подвалом, считается одной из легких даже для начинающих верстальщиков.
Информации по теме в интернете куча, и при даже легком поиске можно найти специализированые сайты с полностью рабочими и многочисленными примерами.

Я не пойму что тут сложного?
Или вы просто только начинаете верстать?

[white[43]]

sa_t_an
Из тех вариантов и ссылок, что были предложены, приспособить ничего не удалось.

Возможно, вёрстка двумя дивами с прижатым к краю окна подвалом является простой даже для начинающего, но мне, к стыду своему, это не удаётся почему-то... Таблицами я чёрта лысого смогу сверстать, а тут два дива и тупик. =/

В итоге сделал с абсолютным позиционированием и прибиванием подвала через JavaScript. Скажете, что сделал через ж... Возможно, но сделал как умею. С дивами никогда вообще не имел ничего общего.

Upd:
Приаттачил своё решение вопроса. Можно ли это упростить?