Inline-Block Width-Problem

[Kuno]

Hat jemand von euch ne Idee, wie man bei einem CSS-basiertem Layout 3 Inline-Blöcke nebeneinander platzieren kann und diese drei Blöcke sich dann den zur Verfügung stehenden Platz teilen.

Mein Problem ist folgendes:

  
<div style="display:block" id="aussen">  
   <div style="display:inline">Element1</div>  
   <div style="display:inline">Image</div>  
   <div style="display:inline">Weitere Blöcke</div>  
</div>  

Bevor ich jetzt mein Problem schildere, sei bemerkt: Nein, ich möchte keine Liste!

Zum Problem:
ich möchte, dass dieses Layout den zur Verfügung stehenden Platz nutzt.
Ich kann allerdings nicht mit width-Angaben arbeiten, da der Platz je Browser variirt.

Wenn ich im umschließenden DIV einfach width:100% setze, so kann ich in den inneren DIV's keine padding,-margin-Werte mehr setzen da diese beim Internet Explorer zu den 100% scheinbar aufgerechnet werden.
Ich möchte ein möglichst Browser-unabhängiges Layout anbieten und mich deshalb so wenig wie möglich auf pixengenaue Angaben beschränken.

Nun meine Frage:

Wie kann ich es machen, dass sich die drei inline-blöcke die gesambreite teilen, ohne dass ich mit px-Angaben arbeiten muss?
Das Layout ist von der Breite dynamisch, dazu kommt di eunterschiedliche Darstellung der Browser. Ich möchte drei inline-Blöcke nebeneinander stehen haben, und zwar so, dass sie den gesamt zur verfügung stehenden Raum einnehmen.

[Jeena Paradies]

Hallo,

Das geht mit inline-block. Leider kann weder der Firefox noch der IE damit umgehen, ich hatte da mal eine Testseite. Aber eigentlich ging es mir damals um das zentrieren dieser inline-blöcke.

Das was du haben willst lässt sich auch mit ein bischen Trixerei mit float und einer breite von 33% hinbekommen.

<div style="float:left; width: 33%"></div>  
<div style="float:right; width: 33%"></div>  
<div style="width: 33%"></div>

oder so ähnlich.

Grüße
Jeena Paradies

[kuno]

Dabei ist aber das Problem, dass er nicht bis zum Rand geht. Und wenn er den Rand erreicht, bricht er die Zeile um und packt die nächste Floatbox  nach unten.
Außerdem funktioniert das in Verbindung mit margin nicht.

[Jeena Paradies]

Hallo,

Dabei ist aber das Problem, dass er nicht bis zum Rand geht. Und wenn er den Rand erreicht, bricht er die Zeile um und packt die nächste Floatbox  nach unten.

Nene, das klappt schon, du musst aber natürlich an das Box-Model denken, 99% sind ja nur das innere der 3 divs. Dazu kommen noch border, padding und marin für jedes. Das wird dann fast immer mehr als 1% der breite betragen und somit zusammen mehr als 100% und der Firefox bricht hier dann, was auch richtig ist, um.

Außerdem funktioniert das in Verbindung mit margin nicht.

Wie meinst du das jetzt?

Grüße
Jeena Paradies

[Detlef G.]

Hallo Kuno

Wie kann ich es machen, dass sich die drei inline-blöcke die gesambreite teilen, ohne dass ich mit px-Angaben arbeiten muss?

Du kannst mit prozentualen Angaben arbeiten. Wie du dies genau ausführst, ob es relativ einfach ist, oder kompliziert wird, oder ob im (möglichst zu vermeidenden) Notfall zusätzliche Elemente nötig sind, hängt von den folgenden Fragen ab.

Wie genau muss diese Aufteilung sein? (Wird da jemand mit einem Lineal nachmessen?)
Was sollen diese Blöcke enthalten?
Wie sieht der Rest der Seite aus?
Sollen die Blöcke einen sichtbaren Rahmen haben, oder verschiedene Hintergrundfarben?

Auf Wiederlesen
Detlef