✔ [FF] div-container wächst nicht mit child-divs

[dsturm]

Hi,

ich habe das Problem, dass sich im FF der Container nicht seiner inneren divs anpasst. Das ganze ist so aufgebaut:

<div id="body">
  <div id="nav_categories">
    <h2>Navi</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>
  <div id="body_content">
    <h2>Headline</h2>
    Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />
  </div>
  <div id="sidebar">
    <h2>Sidebar</h2>
    Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />
  </div>
</div>

CSS:

html, * { margin: 0; padding: 0; border: 0; }

html, body { height:100%; background-color: #CCC; color: #262D19; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 87%; text-align:center; }

#body { width: 770px; background-color: #E7F1E9; min-height: 250px; height: auto !important; height: 250px; }
#nav_categories { float: left; padding-left: 15px; background-color: #E7F1E9; width: 165px; height: 100%;  }
#body_content { float: left; background-color: #FFF; width: 420px; height: 100%; }
#sidebar { float: left; background-color: #E7F1E9; width: 170px; height: 100%; }

So verlängert sich zwar die Höhe des content-divs, aber der komplette body-div liegt sozusagen dahinter und erhält, zumindest im FF nur Höhe durch eine min-height Zuweisung. Aber wenn diese mit 250px gesetzt ist, und der Text im Content länger ist, zieht die Höhe nicht nach...

Jemand eine Idee?

Gruß,
D

 

[Maik]

Nach den floatenden Boxen muß mit der clear-Eigenschaft wieder der normale Textfluss im Dokument hergestellt werden:

div.clear {
clear: left;
font-size: 1px;
}

Das DIV .clear wird dann nach dem DIV #sidebar eingefügt:

<div id="body">
  <div id="nav_categories">
    <h2>Navi</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>
  <div id="body_content">
    <h2>Headline</h2>
    Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />
  </div>
  <div id="sidebar">
    <h2>Sidebar</h2>
    Blindtext<br /> Blindtext<br /> Blindtext<br /> Blindtext<br />
  </div>
  <div class="clear">&nbsp;</div>
</div>

 

[dsturm]

Wow, ok?!

Funktioniert jetzt super, bis auf, dass ich nun durch den div ne 2 px hohe "border" hab. Aber ok. Danke! Wieder was hinzugelernt....

 

[Maik]

Den unerwünschten "Rahmen" kannst du folgendermaßen abstellen:

div.clear {
clear: left;
font-size: 1px;
height: 0; /* Moderne Browser */
line-height: 0; /* IE */
}

 

[dsturm]

Ok ^^ Danke... Dann aber doch noch eins:

Wenn ich den Blindtext herrausnehme bleibt der/ die content-div nur auf Inhaltshöhe, sprich nur die Höhe des <h2>. Kein min-height/ height setting auf 100% wollte bisher das ganze langziehen. Was mach ich da falsch?

 

[Maik]

Ich würde hier die gleiche Höhenregelung, wie auf das DIV #body anwenden.

 

[dsturm]

Ok, manchmal sollte man lieber erst nachdenken...

Jedenfalls vielen Dank für die schnelle, kompetente Hilfe!

 

[Maik]

Einen Tipp hätte ich da noch für dich

Derzeit wird das Layout nur im IE horizontal zentriert, in den modernen Browsern hingegen sitzt es am linken Rand.

Wende daher margin:0 auto auf das DIV #body an, um es im Fenster horizontal zu zentrieren.

 

[dsturm]

Danke ^^ Aber das hatte ich schon, habe nur den entsprechnden Teil weggelassen, um sich aufs wesentliche konzentrieren zu können...

 

[Maik]

... na dann