✔ Div-Höhe an Content anpassen

[Metha]

Hi,

ich möchte, dass mein Div (#body) automatisch an dem in ihm befindelichen Inhalt angepasst wird. Da der Content größtenteils auf MySQL-Tabellen ausgelesen wird, ist die Höhe also immer verschieden.

Mein IE (6.0) stellt es auch zu meiner Zufriedenheit da, Firefox (1.5), Opera (8.0) und Netscape(7.1) lassen den besagten Div aber "überlappen". Ich habe es schon mit "min-height:" beim #body-Div verscuht, doch das bringt auch nichts.

Der Screenshot ist vom Firefox.
Kann mir da jemand helfen ?

Gruß Metha

 

[Maik]

Erweitere das Stylesheet mit folgender Regel:

div.clear
{
clear: left;
height: 0;
margin: 0;
padding: 0;
font-size: 0;
}

<div id="body">
  <div id="content">...</div>
  <div id="box">...</div>
  <div class="clear">&nbsp;</div>
</div>

 

[Metha]

Danke, funktioniert. Kannst du mir den Code auch noch bissel erklären?

 

[Maik]

Nach floatenden Elementen ist ein Element mit der CSS-Eigenschaft clear erforderlich, damit nachfolgende Elemente (Inhalte) unterhalb fortgesetzt, und die floatenden DIVs innerhalb des Elternelements DIV#body dargestellt werden.

Alle übrigen, auf 0 gesetzten, Eigenschaften dienen dazu, daß das Element keinen Platz benötigt und das Layout nicht verschiebt.

 

[Metha]

Hmm Danke.

Finde die Variante nicht sehr elegant. Gibt es eine Alternative, die es besser löst?
Angenommen das Bild im ersten Post ist das Ziel, und der #body soll sich immer an die Spalte anpassen, die den meißten Content hat.

Ein extra Div, ohne wirklichen Inhalt würde ich gerne Vermeiden, wenn es möglich ist.
Ich weiß, das es eigentlich nur Kosmetik...

Jemand eine Idee ?

Gruß Micha

 

[Maik]

Eine elegantere Lösung fällt mir hierfür leider gerade nicht ein.