Elemente in eine Reihe bekommen

[Jan Kosé]

hallo,
habe hier ein seltsames Problem. Irgendwie stellt der IE diese 3-spaltigen Divs (siehe unten) nicht richtig dar. D.h. ich habe 3 Spalten mit den Maßen 180, 390 und 180 Pixel Breite. Diese Divs werden unter Firefox und Opera schön nebeneinander dargestellt unter IE nicht - da wird die mittlere Div nach unten "gedrückt".
Gibt's da irgend ein Trick?

################################## das CSS File:
body {
    margin:0;
    padding:0;
    background: #FF9010;
    font-family: Arial,Verdana,Helvetica;
    font-size: 12px;
}
div#Seite {
    text-align: left;
    margin: 0 auto;
    width: 750px;
    padding: 0;
}
div#Links {
    font-size: 11px;
    float: left;
    width: 180px;
    margin: 0; padding: 0;
    background: #FFB860;
    border:0;
}
div#Rechts {
    font-size: 11px;
    float: right;
    width: 180px;
    margin: 0; padding: 0;
    background: #FFB860;
    border:0;
}
div#Inhalt {
    font-size: 11px;
    margin: 0 180px 0 180px;
    padding: 0;
    border: 0;
    width: 390px;
}
################################## der HTML-Teil:
<div id="Seite">
<div id="Links">y</div>
<div id="Rechts">x</div>
<div id="Inhalt"><img src="3.gif" width="390" height="50" border="0"></div>
</div>

[Zeromancer]

Hallo,

Gibt's da irgend ein Trick?

################################## der HTML-Teil:
<div id="Seite">
<div id="Links">y</div>
<div id="Rechts">x</div>
<div id="Inhalt"><img src="3.gif" width="390" height="50" border="0"></div>
</div>

der Trick ist, das Inhalts-Div als letztes zu definieren/ zu notieren,so dass es den Freiraum zwischen dem linken und rechten Div einnimmt.

<div id="">

<div id="links"></div>
<div id="rechts"></div>
<div id="inhalt"></div>

</div>

Mit freundlichen Grüßen

André

[Martin Hölter]

Hi!
Wo ist der Unterschied zwischen

<div id="Seite">
<div id="Links">y</div>
<div id="Rechts">x</div>
<div id="Inhalt"><img src="3.gif" width="390" height="50" border="0"></div>
</div>

und

<div id="">
<div id="links"></div>
<div id="rechts"></div>
<div id="inhalt"></div>
</div>

?

Gruß aus Iserlohn

Martin

[Zeromancer]

Hallo Martin,

Wo ist der Unterschied zwischen
?

ups, zu fix! U.U. liegt es daran, dass die addierten Breiten genau 750px breit sind, genauso breit wie div#seite ? Ich würde dem div#inhalt keine Breite zuweisen.

Mit freundlichen Grüßen

André

[Jan Kosé]

hab das eben mal ausprobiert und die Breite weggelassen. Noch ein seltsamer Effekt: Die mittlere Div rutscht nacht oben aber die darin engebettete Grafik bleibt unten...

ciao Jan

Hallo Martin,

Wo ist der Unterschied zwischen
?

ups, zu fix! U.U. liegt es daran, dass die addierten Breiten genau 750px breit sind, genauso breit wie div#seite ? Ich würde dem div#inhalt keine Breite zuweisen.

Mit freundlichen Grüßen

André

[Conny]

Hi Jan,

ich hatte bei mir die drei Spalten mit float:left; nebeneinander angeordnet, also die erste und zweite Spalte bekamen jeweils ein float:left; die dritte nicht, da ja nichts mehr umflossen werden sollte. Da trat dann ein ähnlicher Effekt auf, wie du ihn beschreibst: die letzte Spalte hüpfte immer nach unten. Ich fand schließlich heraus, dass alles stabil bleibt, wenn ich auch der letzten Spalte float:left; zuweise. Vielleicht hilft bei dir auch etwas in dieser Art.

Gruß,
Conny

[Zeromancer]

Hallo Conny,

imho ist doch der klassische Weg:

• Navi links mit fester Breite und float:left
• Navi rechts mit fester Breite und float:right
• Inhaltsbereich ohne feste Breite, der dann automatisch den restlichen Platz einnimmt

wobei man dem Inhaltsbereich ein "margin" links und rechts verpasst, dass mindestens die Breite der Navi links/ rechts haben sollte (ja, auch ein "border" ist möglich).

Oder irre ich da?

Mit freundlichen Grüßen

André

[Jan Kosé]

hi Conny,
unglaublich aber wahr: es hat funktioniert. Es wird genauso wie ich es wollte in allen 3 Browsern dargestellt. Danke!

ciao Jan

Hi Jan,

ich hatte bei mir die drei Spalten mit float:left; nebeneinander angeordnet, also die erste und zweite Spalte bekamen jeweils ein float:left; die dritte nicht, da ja nichts mehr umflossen werden sollte. Da trat dann ein ähnlicher Effekt auf, wie du ihn beschreibst: die letzte Spalte hüpfte immer nach unten. Ich fand schließlich heraus, dass alles stabil bleibt, wenn ich auch der letzten Spalte float:left; zuweise. Vielleicht hilft bei dir auch etwas in dieser Art.

Gruß,
Conny

[MudGuard]

Hi,

unglaublich aber wahr: es hat funktioniert. Es wird genauso wie ich es wollte in allen 3 Browsern dargestellt. Danke!

In allen 3? Also sowohl in Lynx, iCab und Amaya?

cu,
Andreas

[Conny]

Hi Jan,

unglaublich aber wahr: es hat funktioniert.

Saublöd, nicht wahr? Es erscheint mir völlig unlogisch.

Es wird genauso wie ich es wollte in allen 3 Browsern dargestellt. Danke!

Gern geschehen. :-)

Conny,
das Problem erst am Montag gehabt habend