Rondra: falsche div höhe

Hi!

total verzweifelt wende ich mich an euch! Ich kriege es einfach nicht hin dass die div-box nur so hoch ist wie es sein inhalt benötigt. Der IE macht die box viel zu hoch!!

Mein ziel ist es per css die divs so anzuordnen wie in meiner angehängten grafik. Hier mein vereinfachter code:

<html>
<head>
<style>
#gesamt {
  bordeR: 2px solid blue;
  width: 150px;
  height: 50px;
  margin-top: 5px;
}

#lo {
  position: relative;
  top: 3px;
  left: 2px;
  background: yellow;
  width: 10px;
  height: 5px;
}

#lu {
  position: relative;
  top: 10px;
  left: 2px;
  background: aqua;
  width: 10px;
  height: 5px;
}

#re {
  position:relative;
  top:-35px;
  left: 15px;
  background: purple;
  width: 25px;
  height: 40px;
}

#text {
  position: relative;
  top: -60px;
  left: 50px;
  width: 60%;
  border: 1px solid black;
}
</style>
</head>
<body>
<div id="gesamt">
 <div id="lo"></div>
 <div id="lu"></div>
 <div id="re"></div>
 <div id="text">labalaba</div>
</div>
<div id="gesamt">
 <div id="lo"></div>
 <div id="lu"></div>
 <div id="re"></div>
 <div id="text">labalaba</div>
</div>
</body>
</html>

Wie kann ich die divhöhe bloss reduzieren?

Danke für jeden Tipp!!
Liebe Grüsse
Rondra

  1. Hi,

    total verzweifelt wende ich mich an euch! Ich kriege es einfach nicht hin dass die div-box nur so hoch ist wie es sein inhalt benötigt. Der IE macht die box viel zu hoch!!

    Bei relativer Positionierung wird das div erstmal da platziert, wo es ohne position:relative wäre.
    Dann wird es entsprechend der Angaben bei top, left, bottom, right verschoben, ohne daß die Reservierung des ursprüngliche Platzes aufgehoben wird.
    Benutze absolute Positionierung und sorge dafür, daß diese als Basis das äußere div hat.

    <div id="gesamt">
    <div id="gesamt">

    Eine id darf höchstens einmal pro Dokument vorkommen, keinesfalls mehrfach.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
  2. </div>
    <div id="gesamt">
    <div id="lo"></div>
    <div id="lu"></div>
    <div id="re"></div>
    <div id="text">labalaba</div>
    </div>
    </body>
    </html>

    Hallo,

    ich habe das selbe Problem gehabt, ich machte ein Menue und die Zwischenräume waren doppelt so groß wie ich dachte.
    Der Firefox machte es richtig und der IE nicht.
    Nachdem ich (für mich unlogischer weise) die Zwischenräume im Code löschte waren auch die Zwischenräume in den Menues weg

    also mach mal:
    </div><div
    id="gesamt"><div
    id="lo"></div><div
    id="lu"></div><div

    intruder