Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Позиционирование div над div-ом

Автор: IronKettle 27.7.2010, 12:19

Всем привет!
Помогите пожалуйста решить следующую проблему:
размещаю DIV над DIV внутри еще одного DIV следующим образом:

Код


<div>
<div style="position:relative;top:0px;left:0px;width:400px;height:300px;"><img src=""></div>
<div style="position:relative;top:-300px;left:0px;width:400px;height:300px;"><img src=""></div>
</div>

Высота внешнего DIV в таком случае равна 600рх, тоесть внизу внешнего DIV остается пустая область.

Можно ли как-то избежать этого и сделать высоту внешнего DIV равной высоте внутрених (без использования position:absolute;) ?

Заранее благодарен.

Автор: Cheloveck 27.7.2010, 12:30

Код


<html>
<body>
<div style="background-color:yellow;">
<div style="background-color:red;position:relative;top:0px;left:0px;width:400px;height:300px;"><img src=""></div>
<div style="background-color:green;position:relative;top:0px;left:0px;width:400px;height:300px;"><img src=""></div>
</div>
</body>
</html>

http://imagepost.ru/?v=181/owgmnzG.jpg
так?

Автор: Violator 27.7.2010, 12:46

Код


<div>
<div style="position:relative;width:400px;height:300px;"><img src=""></div>
<div style="position:relative;width:400px;height:300px;margin-top:-300px;"><img src=""></div>
</div>

Автор: ksnk 27.7.2010, 12:56

Цитата(IronKettle @ 27.7.2010, 12:19

)

без использования position:absolute;

Это что - задачка на сообразительность? smile

Типа выпить стакан воды без рук...

Автор: IronKettle 27.7.2010, 13:11

Решение найдено: margin-top:-300px;

Спасибо Violator! smile