Probleme mit divs nebeneinander

[riddler16]

Hallo zusammen,

ich versuche grad folgendes zu machen:
- 3 divs ca 50% Breite untereinander
- 1 div ca 35% Breite, Höhe sollte den anderen 3 ensprechen rechts daneben
- 1 div mit 85% Breite

Hat wohl was mit "clear" zu tun aber so wirklich krieg ichs nicht hin. Hoffe ihr könnt mir da weiterhelfen:

Hier mal mein Code:

<div class="outer-box">
	<div class="inner-box">
	Test
	</div>
</div>
	
<div class="outer-box">
	<div class="inner-box">
        Test
	</div>
</div>
	
<div class="outer-box">
	<div class="inner-box">
        Test
	</div>
</div>
	
<div class="right-outer-box">
	test
</div>	

<div class="outer-box" style="width: 85%">
	<div class="inner-box">
	test
	</div>
</div>

.outer-box {
	float:left;
	width:50%;
	height:5%; 
	border:20px solid #c0c0c0;	
}
.inner-box {
	padding:15px;
	border:1px solid white;
}
.right-outer-box {
	width: 30%;
	height: 300px;
}

Die "inner-box" ist nur dafür da, damits schöner aussieht-ne box in einer box quasi.

Vielen Dank für jegliche Hilfe

 

[Maik]

Hi,

das dürfte dann in diese Richtung abzielen:

<div class="left-outer-box">
     <div class="outer-box">
        <div class="inner-box">
        Test
        </div>
     </div>

     <div class="outer-box">
        <div class="inner-box">
        Test
        </div>
     </div>

     <div class="outer-box">
        <div class="inner-box">
        Test
        </div>
     </div>
</div><!-- / left-outer-box -->

<div class="right-outer-box">
        test
</div>

<div class="outer-box" style="clear:left;width: 85%">
        <div class="inner-box">
        test
        </div>
</div>

.left-outer-box {
        float:left;
        width:50%;
}
.outer-box {
        height:5%;
        border:20px solid #c0c0c0;
}
.inner-box {
        padding:15px;
        border:1px solid white;
}
.right-outer-box {
        width: 30%;
        float:left;
        height: 300px;
}

mfg Maik