Einfaches DIV layout, vorschläge

[fabio]

hi

habe scho recht lange nicht mehr gross mit html gearbeitet, und mir mal kurz zeit genommen, um wieder damit zu beginnen.

nun wollte ich es so aufbauen wie in der nachfolgenden grafik zu sehen ist



an und für sich ziemlich simple

wenn ich das mache, klappt es im IE schön, dass heisst der grüne div ist schön NEBEN dem blauen, mit float:left gemacht dass es neben dra ist.

beim FF aber ist der grüne positionmässig genau gleich wie der blaue, versteckt einen teil von sich also hinter dem blauen.

was mach ich falsch?

[penizillin]

was mach ich falsch?

du sagst nicht, was du machst.

[fabio]

stimmt eignetlich

hm, also ich hab hier einfach mal den CSS code rauskopiert

<style type="text/css">
<!--
.div_haupt{
width:666px;
border:1px solid red;
padding:0px;
margin:0px;
background-image:url('img/bg_hauptdiv.png');

}

.div_links{
width:65px;
height:100px;
border:0px solid blue;
padding:0px;
margin:0px;
background-image:url('img/icons/r.png');
float:left;
}
.div_mitte{
width:555px;
height:182px;
border:0px solid green;
padding:0px;
margin:0px;
background-image:url('img/verlauf.png');
background-repeat:no-repeat;

}
.div_unten{
width:666px;
height:35px;
border:1px solid yellow;
padding:0px;
margin:0px;
background-image:url('img/unten.png');
position:relativ;
bottom:0px;
}

-->
</style>

und den dazugehörigen html code

<div class='div_haupt'>
<div class='div_links'></div>
<div class='div_mitte'>langer text<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>lang<br/><br/><br/>
lang</div>
<div class='div_unten'></div>
</div>

wie gesagt, kurzfassung:
der blaue ist mit "float:left" getaggt, damit der grüne neben dra ist, und nicht unterhalb.
das funktioniert auch.
aber unter dem firefox ist er nicht neben dem blauen sondern direkt hinten dran.

[prego]

Gib dem grünen ein margin-left von der breite des blauen divs

[fabio]

Original geschrieben von prego
Gib dem grünen ein margin-left von der breite des blauen divs

hm, dass gibt dann aber im IE probleme, weil der ie den ja eben neben den blauen setzt, und dann durch den margin-left noch weiter entfernen würde

[prego]

Das grüne DVI auch float:left.

Achso, geh sicher das sich die Seite im Standardkonformen Modus ist (Firefox->Seiteneigenschaften) damit der IE nicht mit alten Boxmodell oder Ähnlichem arbeitet.

http://www.quirksmode.org