Форум Сайтостроение Веб-строительство

Мега задачка CSS, float

12 3
G
На сайте с 12.04.2008
Offline
101
GSMtricks
1140

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

Итак что должно быть...

Есть 2 вида элементов:

1. 

<div style="width:393px; float:left; height:295px; border:#000000 1px solid; margin: 10px 0 0 10px"></div>

2.

<div style="width:158px; float:left; height:598px; border:#000000 1px solid; margin: 10px 0 0 10px"></div>

Элементы первого вида всегда одинаковы,

Нужно разместить блоки след образом ( 2 он по высоте равен 1 + 1 элемент ):

___________

|1 | | 1|

| -| 2 | -|

|1 | | 1|

По высоте элемент 2 как раз будет примерно как элементы 1 друг под другом

Элемент 1 и 2 можно править, но всегда все элементы 1 одинаковы должны быть.

Как ни крутил не выходит, всегда первые два элемента 1 идут друг за другом, а мне нужно что бы второй опустился под первый...

Может кто понял что я имею ввижу и может помочь? :popcorn:

Продажа сайтов (/ru/forum/866932) под Amazon и AdSense
C
На сайте с 04.02.2005
Offline
277
Chukcha
#1

создать третий фиктивный, по высоте равный первому, а ширине второму

G
На сайте с 12.04.2008
Offline
101
GSMtricks
#2
Chukcha:
создать третий фиктивный, по высоте равный первому, а ширине второму

А куда его ставить? Можно пример?

C
На сайте с 04.02.2005
Offline
277
Chukcha
#3

div1 fl:left

div3 fl:left

div1 fl:left

clear

div1 fl:left

div2 fl:left

div1 fl:left

clear

G
На сайте с 12.04.2008
Offline
101
GSMtricks
#4

Так нагляднее будет что мне нужно.

vandamme
На сайте с 30.11.2008
Offline
675
vandamme
#5

ну так position: relative и absolut

раз известны высота и ширина элементов

C
На сайте с 04.02.2005
Offline
277
Chukcha
#6

:) я бы такое сделал таблицами, и не парил бы себе мозги.

R
На сайте с 17.11.2011
Offline
22
rommer
#7
GSMtricks:
Так нагляднее будет что мне нужно.

три дива

в первые два (с флоатом) вложить по два без флоата.

Первые два чтобы были внутри третьего.

rommer добавил 30.11.2011 в 18:45

в общем №2 = див, в котором все остальное.

домашняя страница - google.com.ua
C
На сайте с 04.02.2005
Offline
277
Chukcha
#8

а если делать блоками

то строить сетку

трехколоночный макет 

<sideleft>

 div1

 div1

<sideleft>

<sidemiddle>

 div2

</sidemiddle>

<sideright>

 div1

 div1

</sideright>
R
На сайте с 17.11.2011
Offline
22
rommer
#9
Chukcha:
а если делать блоками
то строить сетку
трехколоночный макет 

<sideleft>

 div1

 div1

<sideleft>

<sidemiddle>

 div2

</sidemiddle>

<sideright>

 div1

 div1

</sideright>

может оказаться, что sidemiddle будет короче чем боковые.

Их надо бы впихнуть в sidemiddle, тогда нормальек по идее

G
На сайте с 12.04.2008
Offline
101
GSMtricks
#10

Не все так просто, все блоки 1 вызываеются на страницу одним вызовом, блок номер 2 я могу указать после какого блока поставить....

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий