подскажите с дивами

Вид для печати

16.08.2009, 16:29
dubina

есть дакой кусок дизайна

Код:

** <td> ****************** ******************** ********************** <div style="width: 55px; float: left; vertical-align:top;margin-top:5px;margin-bottom:5px"> ************************** картинка1 ************************** ********************** </div> ********************** <div style="position:relative;bottom:-10px; left:-20px"> ********************** картинка2 ********************** </div> ** ********************** <div style="float:left;width:70%;margin-top:5px;margin-bottom:5px"> ************************** текст ************************** ************************** </div> ********************** ****************** </td>

я хочу поместить картинку2 в правый нижний угол картинки1. и все бы хорошо но изза таких манипуляций текст который справа от картинки1 слазит вниз
как сделать правильно?
16.08.2009, 16:50
dubina

добавлю что картинка 2 может быть а может и не быть. так вот если ее нету, то все в порядке и текст не едет в низ
17.08.2009, 08:28
Aykroyd

Цитата:

как сделать правильно?

«Правильно» в данном конкретном случае – это:

1. Забыть про отрицательные поля.
2. Поместить обе картинки в один общий контейнер с position: relative.
3. Спозиционировать вторую картинку абсолютно внутри контейнера.
17.08.2009, 10:49
dubina

Цитата:

«Правильно» в данном конкретном случае – это:

1. Забыть про отрицательные поля.
2. Поместить обе картинки в один общий контейнер с position: relative.
3. Спозиционировать вторую картинку абсолютно внутри контейнера.

клево, только вот я особо не дружу с дизайном, поэтому для меня ваше предложение не очень понятно звучит
22.08.2009, 14:42
Ворон

Цитата:

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

1. C дизайном верстка не имеет практически ничего общего.
2. Позиция "сделайте за меня, ну что вам стоит" в сочетании с грубостью — плохая идея.

Код:

********************** <div style="position:relative;"> ******************************** картинка1 ******************************** <div style="position:absolute; bottom:0; right:0;"> ****************************************** картинка2************************** ******************************** </div> ********************** </div>

vertical-align:top; — вообще бесполезно. Это работает только для элементов, которые отображаются как табличная ячейка. И никак не для блочных.