DIV. Помогите собрать.

Прошу вашей помощи разобраться с ДИВами. Без наглядных примеров по литературе достаточно тяжело.

Суть: сделать каскад а-ля jQuery.
Как я размещаю, по порядку:
1. ДИВ (див на всю страницу, закрывающий содержание и полупрозрачный.
2. ДИВ посередине листа, непрозрачный, в нём будет тело.
3. ДИВ должен располагаться внутри ДИВа2 выравниваясь по правому краю и не влияя на параметры размещения ДИВа 4
4. ДИВ должен располагаться посередине ДИВа 2 и если содержимое ДИВа 4 выходит за рамки - ДИВ2 должен расширяться, меняя размеры, не давая внутренним дивам выйти за рамки.
5. ДИВ должен располагаться под ДИВом 4 внутри ДИВа 2 по левому краю, не выходя за рамки...

Пока всё что осилил:
CSS:
[HTML]#show { position:absolute; width:100%;height:100%;background-color:#FFFFFF;top:0px;left:0px;opacity:0.7;filter: alpha(opacity=70);}
#builtin{ position: absolute; width:60%;height:60%;background-color:#FFFFFF; top:20%;left:20%; z-index:500;opacity:1;filter: alpha(opacity=95);}
#close { position: relative; width:100px;height:50px; background-color:#000000; float: right; z-index:800}
#picture { position:relative; width:400px;height:300px; top:50px; background-color:#666666;}
#bott { position:absolute; float:none; vertical-align:bottom;}[/HTML]

DIV
[HTML]<div id="show">&nbsp;
</div>

<div id="builtin">
<div align="center"><div id="close"></div><div id="picture">
<p>Закрыть dsfsfdfdsfdsfsdfdsfdsfdsf</p>
<p>dfssdf</p>
<p>dsfdsf</p>
<p>dsf</p>
<p>sdf</p>

</div>
</div><div id="bott">dddddddddddddddddddddddddddddddddddddddddddddddddddddd dddd<br>sdfdddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddd<a href="java script:close();">ddddddddddddddddddddddddd</a>ddddd<br></div></div>
<script language="javascript">
function close(){
document.getElementById("show").style.display="none";
document.getElementById("builtin").style.display="none"; }
</script>[/HTML]

Прошу помочь исправить код согласно задумке.

Спасибо.