Hej

Chciałbym osiągnąć taki efekt:


Prosty html tworzący taką zawartość wygląda mniej więcej tak:

[HTML] pobierz, plaintext 
<div style="float: left; background:red; width:100px; height: 100px"> 
	1
</div>
<div style="float: left; background:green; width:30px; height: 100px"> 
	2
</div>
 
<div style="float: left; background:blue; height: 50px; width: 270px;"> 
	3 
</div>
 
<div style="float: right; background: aqua; height: 50px; width: 140px;" > 
	5 
</div>
 
<div style="float: left; background: black; height: 50px; clear: right; width: 240px;"> 
	4 
</div>
 
<div style="float: right; background: fuchsia; height: 50px; clear: right; width: 140px;">
	6
</div>
[HTML] pobierz, plaintext 

Demo: http://mentax.pl/tmp/1.htm

Niestety - w IE 7 to się rozwala (nie wiem jak w IE 6).

Jak to można poprawić (bez zastosowania tabel)?

Sądzę, że o takie coś Ci chodziło:

[HTML] pobierz, plaintext 
<div style="float: left; background:red; width:100px; height: 100px">1</div>
<div style="float: left; background:green; width:30px; height: 100px">2</div>
 
<div style="float: left; width: 270px;">
    <div style="background:blue; height: 50px; width: 100%;">3</div>
    <div style="background: black; height: 50px; width: 240px;">4</div>
</div>
 
<div style="float: right; background: aqua; height: 50px; width: 140px;" >5</div>
<div style="float: right; background: fuchsia; height: 50px; clear: right; width: 140px;">6</div>
[HTML] pobierz, plaintext