Позициониране на кутия

[breakforce]

Здравейте, имам следния проблем както виждате на снимката съм направил как е подреден дизайна ми в момента, целта ми е "Кутия 4" да стане под "Кутия 3"

Снимка:

CSS код:
[css]body { background: url("../images/backgroundStyle.gif") repeat-x #3bb0f3; margin-top: 150px; font-family: Verdana, Arial, Sans-serif; font-size: 11px; }
img { border: 0; }
#box1 { background: url("../images/box1.png") no-repeat; width: 950px; height: 45px; }
#navBar ul { padding: 11px; font-size: 15px; list-style: none; font-weight: bold; }
#navBar li { display: inline; }
#navBar li a { background: url("../images/line.gif") no-repeat right; float: left; padding: 0 15px 0 15px; text-decoration: none; color: #fff; }
#navBar a.last { background: none; padding: 0 15px; }
#navBar li a:hover { color: #f1f1f1; }
#indexPage { width: 950px; margin-top: 30px; }
#indexPage .box3 { background: url("../images/box3.png") no-repeat; width: 320px; height: 310px; float: right; }
#indexPage .Box4 { background: url("../images/box4.png") no-repeat; width: 306px; height: 56px; float: right; }
#indexPage .Box2 { background: url("../images/box2.png") no-repeat; width: 620px; height: 222px; float: left; }[/css]

HTML код:

<div id="Box1">
<ul><li></li></ul></div>
<div id="indexPage">
<div class="Box2"></div>
<div class="Box3"></div>
<a class="Box4" href="#"></a></div>

 

[mo7ika]

според мен промените трябва да започнат от дива index page. Трябва да се обособят два контеинера които да са флоатнати. Левия да съдиржа големия див (2 или кой беше), а десния другите 2, които трябва да са един под друг.

 

[breakforce]

Нещо не ми се получава какво ли не опитах :X

 

[smoke]

Написах ти един нов пример погледни го колко е лесно:

<style>
#left {float:left; width: 70%; height: 500px;}
#right {float:left; width: 20%; height: 500px;}

#box1 {wdith:100%; height: 200px; background:red;}
#box2 {width:100%; height: 100%; background:red;}
#box3 {width:100%; height: 300px; margin-bottom: 20px; background:red;}
#box4 {width:100%; height: 150px; background:red;}
</style>

<div id="box1"></div>

<div id="left">
	<div id="box2"></div>
</div>

<div id="right">
	<div id="box3"></div>
	<div id="box4"></div>
</div>