Как загнать двухколоночный сайт в общий контейнер DIV? @ DeForum.ru

0 Сообщения: 2 Зарегистрирован: 11.04.09

Пытаюсь создать разметку сайта без таблиц, используя только DIV и CSS. Ребята, уже и не знаю как поступить, вроде задачка то типичная... Может я что то не так делаю?

Необходимо сделать двухколонный сайт по центру экрана (два контейнера DIV), заключенный в общий контейнер DIV, чтобы колонки не обтекали друг друга, когда заканчивается их содержимое.

Делаю это так:

Код:

<div id="container">
   <div id="left_column">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat elementum odio. Ut laoreet sagittis lorem. Ut eu arcu vel purus facilisis gravida. Proin semper turpis quis lorem. Suspendisse non eros venenatis ante gravida tincidunt. Phasellus nunc. Integer felis. Curabitur euismod. Nunc arcu metus, ullamcorper et, porta sed, sollicitudin id, eros. Maecenas posuere. Donec suscipit, lectus non elementum elementum, est urna aliquet tortor, ultrices pulvinar nibh lacus sed nisl. Praesent nisi. Aliquam at mauris eget enim laoreet consequat. Donec ut augue vel lectus iaculis semper. Nam erat eros, pellentesque at, elementum a, vulputate in, massa.
   </div>
   <div id="right_column">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat elementum odio. Ut laoreet sagittis lorem. Ut eu arcu vel purus facilisis gravida. Proin semper turpis quis lorem. Suspendisse non eros venenatis ante gravida tincidunt. Phasellus nunc. Integer felis. Curabitur euismod.
   </div>
</div>

В CSS разметка такая (все предельно упрощено):

Код:

#container {
width: 760px;
margin: 0 auto 0 auto;
border: 1px solid #000;
}

#left_column{
border: 1px solid #000;
width: 545px;
float: left;
}

#right_column{
border: 1px solid #000;
width: 185px;
float: right;
}

А выглядит это вот как:

Обратите внимание на черную полосу вверху. Это border 1px общего контейнера id="container", который по логике, должен охватывать контейнеры, которые находятся внутри него, обрамляя их рамкой, но он этого почему то не делает! А это важно, например для того, чтобы сделать фон и границы сайта.

В CSS для right_column я удалил width: 185px; float: right; В результате рамка общего контейнера id="container" стала обрамлять всю страницу, как и требовалось, но теперь текст правого столбца обтекает левый, а нужно чтобы обтекания не было. Тэг clear: both не помог

Результат можно увидеть здесь:

Никак не могу понять, почему так происходит и как правильно сделать?

если вы не понимаете принципов рендеринга документа то какого рожна верстаете дивами?
clear:both это не тэг это свойство и именно оно вам поможет

Код:

<div id="container">
   <div id="left_column"></div>
   <div id="right_column"></div>
   <div style="clear:both"></div>
</div>

Плавающие блоки по определению выпадают из нормального потока, поэтому блок id="container" как бы схлопнулся, потому что посчитал, что в нем ничего нет. В результате этого наверху видна двойная рамка "схлопнутого" контейнера. Для устранения этой проблемы нужно после двух внутренних блоков к примеру написать тег <br style="clear:both">

#container {overflow: hidden;}

0 Сообщения: 2 Зарегистрирован: 11.04.09

Спасибо за помощь! Помогло!

34 Сообщения: 1866 Зарегистрирован: 17.02.04

Heznar,
для познавания:
svoystvo-clear-v-css-kak-izbavitsya-ot-nenuzhnih-elementov--t65987.html

Спасибо, реально помогло!

DeДверь
Логин:
Пароль:
	Автологин