✔ höhenproblem im Firefox

[stbenne2]

Hallo Forum,

ich steige gerade von Tabellen auf css um und habe folgendes Problem:

http://web2.vs188046.vserver.de/demo3.htm

Im IE passt sich mein Elterncontainer mit dem Hintergrundbild automatisch der Höhe der darin befindlichen Container an, im Firefox nicht.
Da mein Content dynamisch eingefügt wird weiß ich am Anfang nicht wie hoch das ganze wird, gibt es dafür auch eine Lösung im FF?

Wenn mir da jemand helfen könnte währe das super, ich finde einfach keine Lösung.

Gruß Stefan

 

[Maik]

Herzlich Willkommen auf tutorials.de, stbenne2!

Hierfür müssen zum einen die festen Höhenangaben aus den Selektoren #leftmenue und #contentbild entfernt, oder wie im Selektor #contentcontainer in Mindesthöhen umgeschrieben werden, und zum anderen nach den floatenden Boxen ein Blockelement mit der clear-Eigenschaft eingesetzt werden, um wieder den normalen Textfluss im Dokument herzustellen.

#leftmenue {
   float: left;
   width: 158px;
   margin-left: 12px;
   color: #000000;
}

#contentbild {
   float: left;
   width: 446px;
   color: #000000;
}

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

bzw. mit Mindesthöhen

#leftmenue {
   float: left;
   width: 158px;
   min-height: 180px;
   height: auto !important;
   height: 180px;
   margin-left: 12px;
   color: #000000;
}

#contentbild {
   float: left;
   width: 446px;
   min-height: 229px;
   height: auto !important;
   height: 229px;
   color: #000000;
}

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

<div id="contentcontainer">
   <div id="leftmenue">Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br>Menü<br> </div>
   <div id="contentbild">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br></div>
   <div class="clear">&nbsp;</div>
</div>

 

[stbenne2]

DANKE !

Gruß Stefan