Im Anhang sieht man wie es seien soll.

So möchte ich die Reihenfolge der divs gerne haben:

HTML-Code:

<div class="top">das blaue oben</div>

<div class="left">das gelbe an der seite</div>

<div class="right">der grüne rest</div>

<div class="middle">der rote streifen</div>

Und das ist mein CSS dazu:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.top {     background-color : #00f;     height : 80px; }   .left {     background-color : #ff0;     display : inline;     float : left;     width : 40px; }   .middle {     background-color : #f00;     display : inline;     float : left;     margin : 0px;     width : 10px; }   .right {     background-color : #0f0;     margin : 0 0 0 50px; }

(Farben dienen nur zum verdeutlichen)

Das Ergebnis sieht man im Anhang.

EDIT : Ich bin deppert. Schon gelöst aber nun anderes Problem: Der rote streifen soll die Höhe vom grünen immer haben. Der grüne ändert sich je nach Inhalt.

Hi,

in dem Artikel AnyColumnLongest findest du Verweise zu diversen Techniken für "Equal-Height-Columns".

mfg Maik

Danke!
Hab mir schon einige angeguckt aber es scheint so gut wie unmöglich zu sein.
Tricksen mit dem Body-Hintergrund geht leider nicht da in dem mittleren schmalen gif ein einziger link gesetzt werden soll in der selben höhe wie der inhalt (rechter div).

Mal durchwuseln, vielleicht findet sich ja was.