Как вывести див в цикле и как заставить его удлиниться?

[Warrangie]

Если выводить див в цикле, он просто будет накладываться один на другой, как сделать так, что бы такого не происходило?

<div id="sh">
<div id="apDiv1">
<span class="s_name">There are many variations of passages of Lorem Ipsum available, but the majority of passages variati</span>
</div>
<div id="apDiv2">
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apDiv7"></div>
<div id="apDiv9">
<p class="s_com">There are many variations of passages of Lorem Ipsum available, but the majority of passages variati</p>
</div>
</div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
</div>

/——————————-разделитель———————————/

#apDiv1 {
position:absolute;
width:798px;
height:25px;
z-index:1;
left: 30px;
top: 5px;
border: 1px solid black;
font-size: 14px;
}
#apDiv2 {
position:absolute;
width:798px;
height:120px;
z-index:2;
left: 30px;
top: 40px;
border: 1px solid black;
}
#apDiv3 {
position:absolute;
width:798px;
height:25px;
z-index:1;
left: 30px;
top: 170px;
border: 1px solid black;
}
#apDiv4 {
position:absolute;
width:83px;
height:28px;
z-index:3;
left: 5px;
top: 60px;
border: 1px solid black;
background-color: #FFF;
}
#apDiv5 {
position:absolute;
width:468px;
height:60px;
z-index:1;
left: 10px;
top: 10px;
border: 1px solid black;
}
#apDiv9 {
position:absolute;
width:468px;
height:30px;
z-index:4;
left: 10px;
top: 80px;
border: 1px solid black;
}
#apDiv6 {
position:absolute;
width:190px;
height:100px;
z-index:2;
left: 488px;
top: 10px;
border: 1px solid black;
}
#apDiv7 {
position:absolute;
width:100px;
height:100px;
z-index:3;
left: 688px;
top: 10px;
border: 1px solid black;
}
body {
font-family: Verdana, sans-serif;
font-size: 12px;
}
.s_name {
display: block;
height: 15px;
margin-top: 4px;
margin-left: 10px;
font-size: 13px;
}
.s_com {
color: red;
display: block;
height: 28px;
margin-top: 0px;
margin-left: 7px;
}
#sh {
position:absolute;
width:835px;
height:202px;
z-index:1;
border: 1px solid red;
}
#apDiv8 {
position:absolute;
width:642px;
height:115px;
z-index:2;
left: 168px;
top: 21px;
}

И как сделать так, что бы в ячейке с красным текстом в правом нижнем углу была ссылка "Далее...", при нажатии на которую вся эта конструкция удлинялась вниз и текст как бы обтекал два правых блока?

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

Красный бордер мера временная. Ниже ссылка для просмотра сего дела.

http://warrangie.16mb.com/test.html

[Bobikys]

#sh {

position:absolute;

width:835px;

height:202px;

z-index:1;

border: 1px solid red;

}

позиционирование скорее в этом дело

Edited January 15, 2013 by Bobikys

[Warrangie]

#sh {

position:absolute;

width:835px;

height:202px;

z-index:1;

border: 1px solid red;

}

позиционирование скорее в этом дело

Просто я никогда не занимался версткой, поэтому несколько не понимаю "идеологии" позиционирования. Какое лучше в этом случае?

[Bobikys]

relative наверное ))

я сам еще вообще ничего не верстал

http://htmlbook.ru/css/position

[Warrangie]

relative наверное ))

я сам еще вообще ничего не верстал

http://htmlbook.ru/css/position

Ага, выставил релатив до того, как прочитал, и действительно все хорошо заработало.

Edited January 15, 2013 by Warrangie