Помогите вложить слои

[Ururu]

в центре страницы создан блок с шириной 100%.

в нем 3 блока

<div id="main">
   <div id="leftcol"></div>
   <div id="content"></div>
   <div id="rightcol"></div>
</div>

ширина leftcol и rightcol по 100px

использую float, а получается что блоки расположены вертикально, один за другим, как их расположить на 1 линии (колонками)?

если использовать только 2 блока, то все нормально.

П.С. И еще вопрос как отцентровать объект в блоке ? Не используя <center></center>.

Edited April 11, 2009 by Ururu

[Justnewone]

в центре страницы создан блок с шириной 100%.

в нем 3 блока

<div id="main">
   <div id="leftcol"></div>
   <div id="content"></div>
   <div id="rightcol"></div>
</div>

ширина leftcol и rightcol по 100px

использую float, а получается что блоки расположены вертикально, один за другим, как их расположить на 1 линии (колонками)?

если использовать только 2 блока, то все нормально.

П.С. И еще вопрос как отцентровать объект в блоке ? Не используя <center></center>.

по фрагменту пока ничего не понятно, надо код или ссылку.

Отцентрировать можно, если родителю в стилях сказать text-aligne:center, а самому элементу маргины слева и справа auto, ну и вернуть выравнивание left.

[Ururu]

Пробую в блоке-контейнере разместить 3 горизонтальных блока-колонки. У правого и левого фиксированая ширина. У центрального зависит от окна браузера и растягивается от левой до правой. Но получается перенос блоков, маргин авто не помог.

Вот что есть:

html

<div id="main">
	<div id="leftcol"></div>
	<div id="content"></div>
	<div id="rightcol"></div>
</div>

css

#leftcol {
background-color: #FFDAB9; /* Цвет фона PeachPuff1 255 218 185 #FFDAB9 */
width: 120px; /* Ширина слоя */
margin-left: 3px; /* Отступ слева */
margin-bottom: 3px; /* Отступ снизу */
margin-top: 3px; /* Отступ сверху */
float: left; /* Обтекание по правому краю */
min-height: 489px; /* Минимальная высота */
}

#content {
background-color: #8B7D6B; /* Цвет фона AntiqueWhite1 255 239 219 #FFEFDB */
margin: auto;
min-height: 489px; /* Минимальная высота */
}

#rightcol {
background-color: #FFDAB9; /* Цвет фона PeachPuff1 255 218 185 #FFDAB9 */
width: 120px; /* Ширина слоя */
margin-right: 3px; /* Отступ справа */
margin-bottom: 3px; /* Отступ снизу */
margin-top: 3px; /* Отступ сверху */
float: right; /* Обтекание по левому краю */
position: relative;
min-height: 489px; /* Минимальная высота */
}

Делал все как написано тут (пример 2) http://htmlbook.ru/content/?id=95

А получается только так:

Скрин

Edited April 12, 2009 by Ururu

[Justnewone]

<div id="main">
    <div id="leftcol"></div>
    <div id="rightcol"></div>
    <div id="content"></div>
</div>

[Searcher]

#content {
background-color: #8B7D6B; /* Цвет фона AntiqueWhite1 255 239 219 #FFEFDB */
margin: 0 120px;
min-height: 489px; /* Минимальная высота */
}

<div id="main">
	<div id="leftcol"></div>
	<div id="rightcol"></div>
	<div id="content"></div>
</div>

[Ururu]

Спасибо, незнал что есть разница очереди при вложении.

[Searcher]

Здесь дело не во вложении.

При стандартном позиционировании блок без указания ширины растягивается по всей доступной ширине и все, что описано в коде ниже располагается под ним. Блоки с float:left и float:right (плавающие) выпадают из общего потока, т.е. элементы с обычным позиционированием не видят этих блоков. Но эти-то плавающие блоки располагаются относительно обычного потока, они то видят обычные блоки. В результате у вас что получалось:

[ [блок с float:left] .......обычный блок растягивается на всю ширину.......................]
								  [блок с float:right видит предыдущий блок и выводится ниже]

Edited April 13, 2009 by Searcher