dreispaltiges layout mit div container

[Casimyr]

Guten Abend!

Ich habe ein Problem beim Erstellen eines dreispaltigen Layouts mit <div>-Containern. Die rechte Spalte "rutscht" immer runter. Hier mein vereinfachter Quellcode:

<div style="width:760px;background-color:silver;">
<div style="width:120px;float:left;border-right:1px solid #ffffff;background-color:green;">
</div>
<div style="width:200px;background-color:red;">
</div>
<div style="width:439px;float:right;background-color:yellow;">
</div>
</div>

Ich verstehe nicht, warum zwischen der grünen und roten Spalte ein Abstand entsteht. Dadurch passt die gelbe Spalte nicht mehr daneben.

Ich habe schon versucht die gesamte Breite größer zu machen bzw. die mittlere und rechte Spalte schmaler. Es halt jedoch nicht geholfen. Der Rahmen bei der rechten Spalte ist gewollte, da er in der kompletten Seite auch dahin gehört.

Viele Grüße
Casimyr

[Johannes]

Hallo,

zwischen dem roten und dem grünen Bereich ist ein Pixel abstand, den rufst du hervor durch:

border-right:1px solid #ffffff;

Wenn du in "das rote div" nun noch ein float:left; einfügst, dann wird "das gelbe div" auch daneben angezeigt.

Gruß,

Johannes

[Zeromancer]

Hallo Casimyr,

<div style="width:760px;background-color:silver;">
<div style="width:120px;float:left;border-right:1px solid #ffffff;background-color:green;">
</div>
<div style="width:200px;background-color:red;">
</div>
<div style="width:439px;float:right;background-color:yellow;">
</div>
</div>

schreibe das rechte Div vor das mittlere Div im Quelltext, so dass erst links und rechts der Inhalt geladen wird und das mittlere als zuletzt geladen den verbleibenden Platz füllt. Die Beitenangabe von 200px kannst du dir dann sparen. Beachten solltest du dann nur ein 'margin' für den mittleren Container von der Maßen der linken und rechten Container benutzen.

Mit freundlichen Grüßen

André

[Ingo Turski]

Hi,

Ich verstehe nicht, warum zwischen der grünen und roten Spalte ein Abstand entsteht. Dadurch passt die gelbe Spalte nicht mehr daneben.

das ist nicht der Grund. Wenn Du Dir das Beispiel in einem korrekt arbeitenden Browser wie Firefox ansiehst, wirst Du feststellen, daß das rote DIV nur eine sichtbare Breite von 80px hat, da es das linke DIV überlagert. Und obwohl rechts dann noch mehr als genug Platz ist, wird das rechts-floatende DIV darunter gesetzt. Das liegt daran, daß das mittlere DIV nicht floatet und daher einen Umbruch erzeugt.
Damit float funktioniert, müssen floatende Elemente zuerst im Quelltext notiert werden!

Ich verstehe nicht, warum zwischen der grünen und roten Spalte ein Abstand entsteht.

Der entsteht nur im Internet Explorer und beträgt exakt 3px. Dies ist ein sehr bekannter Fehler, den dieser Browser immer macht, wenn ein nicht-floatendes Element neben ein floatendes gesetzt wird.

freundliche Grüße
Ingo