✔ FF und IE mit zwei Containern nebeneinander

[Fiberman]

Hallo,

ist es möglich zwei div Container nebeneinander darzustellen ohne die Breite anzugeben?

<div class="left"></div>
<div class="right"></div>

.left {
float left;
}

.right {
float right;
text-align:left;
}

In dem linken Container wird ein Bild mit unterschiedlichen Breiten generiert, der rechte Container sollte sich dann an die Größe des Linken anpassen.
Im IE funktioniert das, nur im Firefox nicht, da der die Container untereinander darstellt.

Danke für die Antworten
schönen Gruß Fiberman

 

[Maik]

Hi,

du hast da jeweils nach der float-Eigenschaft den Doppelpunkt vergessen - deshalb wundert's mich, dass das Modell überhaupt im IE funktioniert.

Für dein Vorhaben empfiehlt es sich, die linke von der rechten Box umfliessen zu lassen, sprich die Klasse .right nicht mit der float-Eigenschaft zu formatieren:

.left {
float: left;
background: #ccc;
}

.right {
text-align:left;
background: #aaa;
}

Ich hab hier mal zwei Hintergrundfarben eingesetzt, damit du die Ausdehnung der beiden Boxen erkennst.

 

[Fiberman]

Die Doppelpunkte hab ich in der Eile vergessen. Natürlich sind die in meinem Quelltext vorhanden.

Wenn ich den rechten Container mit um den linken nehme, und der Text länger ist als das Bild, dann fliesst der doch nach dem Bild ganz nach links unter das Bild. (Siehe Bild 3)

Aussehen soll das wie im Bild 1! Der FF zeigt das aber an wie Bild 2.

 

[Maik]

Also bei mir richtet der Firefox-Browser die beiden DIVs nebeneinander aus, und nicht, wie in Bild 2, untereinander.

Wenn das rechte DIV bei zunehmenden Inhalt das linke nicht umfliessen, also sich nicht darunter nach links ausdehnen soll, wäre in meinem gezeigten Beispiel eine Angabe zum linken Außenabstand margin-left erforderlich.

 

[Fiberman]

Ok,

also muss ich doch mit margin arbeiten, was ich eigentlich nicht wollte.

Danke für die Antworten und die Hilfe