Категории

Помогите с div'ами (позиционирование)

Как заствить работать style="float:left;"

<div style="overflow: hidden; position: relative;">

<div style="float:left;">
<div style="background: green;position: absolute; bottom: 0; border: 1px solid #ff0;height:100%;width:200px;">{$box_CATEGORIES}{$box_ADD_QUICKIE}{$box_INFORMATION}{$box_FAQ}{$box_LAST_VIEWED}</div></div>

<div style="float:left;">
<div style="background: green;position: absolute; bottom: 0; border: 1px solid #fff;height:100%;width: 573px;">{$main_content}</div></div>

<div style="float:left;">
<div style="background: green;position: absolute; bottom: 0; border: 1px solid #ff0;height:100%;width:200px;">

{$box_ADMIN}

{$box_NEWSLETTER}

{$box_BESTSELLERS}

{$box_INFOBOX}

{$box_LANGUAGES}

{$box_SPECIALS}

{$box_WHATSNEW}

{$box_MANUFACTURERS_INFO}

{$box_MANUFACTURERS}

{$box_LATESTNEWS}{$box_REVIEWS}</div></div>

<div style="clear: both;"></div>
</div>

или как правильно построить три колонки подряд по горизонтали на дивах

Убрать абсолютное позиционировани и добавить в дивы с float:left; еще и ширину каждого блока.
Убрать bottom:0
Самому первому диву добавить ширину, которая будет в сумме составлять ширину всех блоков включая и бордер(в 1 пиксель с каждой стороны). и задать margin:0 auto; если нужно, чтобы макет был по центру.

т.е в итоге должно получится, что-то вроде

<div style="width:900px;margin:0 auto;">
<div style="width:200px;float:left;">Левая колонка</div>
<div style="width:500px;float:left;">Центральная колонка</div>
<div style="width:200px;float:left;">Правая колонка</div>
<div style="clear:both;"></div>
</div>

PS Такое построение макета - не правильно.
Контент должен быть ВЫШЕ всех блоков, а не между двумя колонками. т.к. в твоем случае поисковики будут находить в первую очередь не важный контент, а колонку с блоками.

вот тут сгенерируй себе нормальный макет - csstemplater.com

Спасибо, какже я мог не заметить такую прелесть как этот сайт, после суточного занятия любовью с поисковиками по поводу дивов.

Уменя все не выходило фон растягивать до подвала, надеюсь, с этого сайта что-то да подойдет.

Аа, так вижу,что и этот сайт так делать не умеет, подвал дива заганяет вниз а вот боковой бекграунд идет на растяжку только по тексту :(

Это не сайт так делает, а особенность CSS. Просто height:100%; работать не будет.
Я попозже покажу как сделать. ща убегать надо.

В этом случае проще сделать так.
Создать картинку высотой в 1 пиксель и шириной макета
Далее с левой и правой стороы сделать нужный цвет шириной как и ширина блоков. и сохранить.

потом в CSS к #wrapper(он имеет 100% высоту) добавить
background:url(images/картинка фона) repeat-y;

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

не выходит, вот с таким кодом как в первом посте растягивается до футера, но влоат перестаёт работать.

у меня работает все ;D

Вот тут 4 способа приведены http://habrahabr.ru/blogs/css/64173/
Думаю 4 способ- самое то.

вот этот 4 вариант какраз то ;)
ну и на мучено с теми дивами, еле разобрался ито методом тЫКА :o

Источник