Zwei <div>s nebeneinander "floaten"

[Konrad L. M. Rudolph]

Moin,

die lange Offlinezeit vom SelfForum schlägt anscheinend nicht nur auf den Magen sondern auch aufs Gehirn -- bei mir zumindest.

Das Problem ist schon richtig cliché: ich bekomme es nicht hin, zwei <div>-Layer auf einer Seite "gleichberechtigt" und mit einer Trennlinie dazwischen auszugeben.

Das ganze soll so aussehen:
+---------+------------------------+
' menu    | content                '
'         |                        '
'         |                        '
'         |                        '
'         |                        '
'         |                        '
'         |                        '
'         |                        '
'         |                        '
+---------+------------------------+

Wenn ich folgendes CSS verwende:

#menu { float: left; width: 30em; display: block; }
#content { border-left: 1px dashed blue; display: block; }

dann ist
1- der Border nicht rechts vom Menü, sondern links davon
2- Content fließt um das Menü herum, da dieses viel kürzer ist.

Ich kann leider nicht 'display: table-cell' verwenden (das würde das Problem erledigen), da das Layout auch im MSIE sichtbar sein sollte.

Gruß,
KonRad -

[Jan L.]

Hallo,

Gib dem content-div doch einfach ein 'margin-left: 30em'. Das 'display: block' kannst du dir m.E. sparen, da divs ja sowieso Blöcke sind.

Gruß, Jan

[Konrad L. M. Rudolph]

Gib dem content-div doch einfach ein 'margin-left: 30em'.

Autsch. Klappt.

Das 'display: block' kannst du dir m.E. sparen, da divs ja sowieso Blöcke sind.

Ack.

Vielen Dank :-)

Gruß,
KonRad -

[jensr]

#menu { float: left; width: 300px; display: block;}
#content { float:left; border-left: 1px dashed blue; display: block;}

So klappts bei mir

[Paul Brunner]

Hallo Jan,
Hallo Konrad

Gib dem content-div doch einfach ein 'margin-left: 30em'. Das 'display: block' kannst du dir m.E. sparen, da divs ja sowieso Blöcke sind.

Vorsicht, diese Variante ist nicht nur technisch "wackelig", sondern macht auch Probleme im IE5 (siehe http://www.positioniseverything.net/articles/float-bugs-1.html).

Besser ist die Version von jensr

Gruss
Paul

[Ingo Turski]

Hi,

Gib dem content-div doch einfach ein 'margin-left: 30em'. Das 'display: block' kannst du dir m.E. sparen, da divs ja sowieso Blöcke sind.

Vorsicht, diese Variante ist nicht nur technisch "wackelig",

wieso denn das? Ich habe noch nichts "wackeln" sehen. Der einzige negative Effekt, der dabei auftreten kann ist, daß der IE den Text neben dem floatebnden Bereich ein paar px einrückt.

sondern macht auch Probleme im IE5 (siehe http://www.positioniseverything.net/articles/float-bugs-1.html).

das habe ich dort zwar auf die Schnelle nicht sehen können, dafür habe ich es mit dem IE5.01 mal selbst getestet und nichts negatives feststellen können.

Besser ist die Version von jensr

mit Sicherheit nicht, denn sie setzt - unnötig - darauf, daß float ohne width funktioniert. und eine Beite kann man ja in diesem Fall nicht angeben, da sie von der variablen Fensterbreite abhängt.

freundliche Grüße
Ingo

[Detlef G.]

Hallo Konrad

Als kleine Gedächnisstütze, wies bei verschiedenen Varianten aussieht:
http://d-graff.de/demos/selfhtml/float_left_test.html

Auf Wiederlesen
Detlef