<div> als Lückenfüller mit CSS

[rafael]

Hallo zusammen

Ich habe ein Problem mit CSS und komme nicht mehr weiter.

Ich habe 5 div-Boxen nebeneinander, die zusammen die ganz Bildschirmbreite nutzen sollen. 3 davon haben eine bestimmte Pixelbreite und die letzten 2 sollen sich den Rest teilen.

Also:
1. Box: 200px
2. Box: (100% -200px -400px -100px) /2 -> also die Hälfte vom Rest
3. Box: 400px
4. Box: (100% -200px -400px -100px) /2 -> also die Hälfte vom Rest
5. Box: 100px


Wie lässt sich soetwas mit CSS realisieren?

 

[flapo]

Solche Rechnungen gehen mit CSS nicht. Meine "spontane" Idee wäre es, dass du den drei divs die festen Breiten zuweist und um die anderen zwei ein Extra-div machst. Die Breiten für die Unterdivs gibst du dann mit je 50% an.

Ich weiss allerdings nicht genau, ob sich die 50% dann auf das drumgelegte div oder auf die Fensterbreite bezieht!

 

[rafael]

Zwischen den beiden divs, die
sich in der Breite anpassen, gibt es noch mal eines, dass festgelegt ist. Also sind es nachher nicht 50% vom übrigbleibenden Platz.

 

[Prophet]

Problem ist nur das sich divs immer auf den gesammten zur verfügung stehenden raum beziehen nicht aluf den der noch über ist nachdem anderen divs ihn verwendet haben.

 

[dukexp]

Wieso benötigst du denn Divisionen als Lückenfüller? Wären nicht Außenabstände deutlich sinnvoller?

 

[rafael]

Was meinst du mit Aussenabständen?

 

[flapo]

[css]margin[/css]

Divs sind keine blind-gifs!

 

[rafael]

Hallo

Aber für margin müsste ich ja wissen, wie viel er links und rechts vom Rand weg soll, aber ich weiss für box2 und box4 nur jeweils eine Seite, die andere ändert sich ja je nach Bildschirmbreite.

 

[Prophet]

Du kannst das links und rechte Div ja links und rechts floaten lassen. Das mittlere kann ja dann zentriert werden. Dadurch würde glaube ich der gewünschte effekt erzeugt...

 

[rafael]

Es sind aber im ganzen 5 divs, von denen 2 eine nicht festgelegte Breite haben.

 

[flapo]

Am besten zeichnest du das mal auf.

 

[rafael]

Also ich habe jetzt mal eine kleine Zeichnung gemacht. So sollte das aussehen. Div 2 und 4 müssen der Bildschirmbreite angepasst werden.



1. Box: 200px
2. Box: (100% -200px -400px -100px) /2 -> also die Hälfte vom Rest
3. Box: 400px
4. Box: (100% -200px -400px -100px) /2 -> also die Hälfte vom Rest
5. Box: 100px

 

[Prophet]

Brauchst du zwingend diese lückenfüller divs? Wann nein kannst du meine lösung verwenden.

 

[rafael]

hallo

Also lösen konnte ich das Problem nicht, aber ich fand einen Workaround. Ich habe jetzt mit position: absolute gearbeitet und so 1 und 5 auf left bzw right: 0px gesetzt
und 2+3+4 habe ich zusammengenommen.

 

[Artemis]

Es geht auch so:

Die Divs 1, 3 und 5 richtest du so aus, wie gewünscht (geht recht einfach). Du gibst ihnen aber noch zusätzlich den [CSS]z-index[/CSS] 2.
Die Divs 2 und 4 machst du 50% breit, eins links eins rechts und gibst ihnen den z-index 1.

 

[rafael]

Das tönt interessant, dass werde ich mal ausprobieren. Vielen Dank.