CSS Auf dem Schlauch: Zwei floatende Sidebars untereinander

[kaozente]

Hallo zusammen,

mein Design hat links einen grossen Div, daneben floatet friedlich eine Sidebar. Auf manchen Seiten moechte ich ueber der Sidebar eine weitere Box einfuegen. Sollte einfach sein, passiert aber nicht - ich stehe auf dem Schlauch :wink:

Habe das ganze mal nachgebaut:

<div style="width: 800px; background-color: grey;">
    <div style="width: 500px; height: 700px; display: inline-block; background-color: yellow;">left</div>
    <div style="width: 250px; height: 300px; background-color: green; float: right; display: inline-block;">right 1</div>
    <div style="width: 250px; height: 300px; background-color: red; float: right; display: inline-block;">right 2</div>
</div>

Bild wies aussieht im Anhang. Wunsch ist natuerlich, das right 1 und right 2 beide neben dem grossen Div floaten. Natuerlich koennte ich die beiden in einen extra Div packen, aber das wuerde meine Template Logik stoeren...

Wenn ich den grossen Div nach links floaten lasse funktionierts auch, aber der Logik nach sollte es doch auch so gehen? Einer der Bloecke floatet ja auch wunderbar.

Danke im Voraus fuer Erleuchtung,
Kao

 

[t3rr0r.bYt3]

Floating passiert zeilenweise. Das gelbe Element geht maximal nach links, das grüne maximal nach rechts. Das rote hat in dieser Zeile keinen Platz mehr, also kommt es in die nächste Zeile - unterhalb des gelben.

Warum allerdings das graue Element nicht mehr das rote enthält, versteh ich auch nicht wirklich, aber man kriegt das hin, indem man beim grauen auch display: inline-block setzt.

Der korrekte Weg wäre aber wohl wirklich, rechts ein "großes" div zu setzen, das dann das grüne und das rote enthält.

Mit inline-block solltest du eh aufpassen, das rendert auch whitespaces im html (abhängig von der font size(!)), was einem das Layout unerwartet kaputtmachen kann.

/edit2: Das graue Element ist selbst nicht floating und damit resized nicht in Abhängigkeit von den Elementen, die es enthält. Wenn man es floating setzt (z.b. float: left), dann wird es groß genug, um auch das rote Element zu enthalten - natürlich weiterhin in einer eigenen Zeile.

 

[RemoteC]

Und wen du das ganze positionieren würdest?

<div style="width: 250px; height: 300px; background-color: red; float: right; display: inline-block; position:relative; top:-300px;">right 2</div>