<div> nicht innerhalb eines <div> im FF

[Arndtinho]

Hallo,

ich habe folgende Struktur in einem HTML-Element.

<div id="content">
	<div id="content_top"></div>
	<div id="content_row">
		<font class="content_row_header">Titel</font>
		<br><br>
		
		<div style="float: left; width: 385px;">bla</div>
		<div style="float: right; width: 385px;">bla</div>
		<div style="float: left; width: 25px;">leer</div>
		
	</div>
	<div id="footer"></div>	
</div>

Das Problem an der Sache ist, dass "bla", "leer" und "bla" in der richtigen Reihenfolge dargstellt, aber nicht innerhalb des <div>'s "content_row" angezeigt werden. Woran kann das liegen?
Hier noch das entsprechende CSS:

#content {
   margin-top:          20px;   
   width:               810px;
   height:              auto; 
   font-size:           11px;
   font-family:         Verdana, Arial, Helvetica, sans-serif;
   background-color:    #F3F4F5;
   border:              1px solid #4682b4;
}

#content_top {
   width:               810px;
   height:              20px;
   background-color:    #b0c4de;
}

#content_row {
   margin-top:          10px;
   width:               800px;
   height:              auto;
   margin-left:         3px;
   margin-right:        3px;
   text-align:          left;
   border:              1px solid gainsboro;
}

#footer {
   width:               810px;
   height:              5px;
}

Viele Grüße
Arndtinho

 

[Maik]

Hi,

die Floatumgebung muss noch "gecleart" werden, damit die umschliessende Box #content_row ihre tatsächliche Höhe annimmt, und der Inhalt das Element am unteren Rand nicht überlappt - siehe http://positioniseverything.net/easyclearing.html.

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Die Klasse .clearfix wird im DIV #content_row aufgerufen:

<div id="content_row" class="clearfix"> ... </div>

 

[Gumbo]

Wie sollte es denn aussehen?

 

[Arndtinho]

@Gumbo

Die Größe von "content" soll entsprechd der Höhe des Inhaltes von "content_row" + "content_top" + "footer" angepasst werden, da "content_row" variable in der Höhe ist.

 

[Gumbo]

Das ist aber nicht möglich, wenn die Inhalte (die drei div-Elemente) durch float aus dem normalen Elementfluss genommen werden.

 

[Maik]

Das Problem haben wir aber schon mal in einem deiner Themen besprochen -> varibale höhe im FF funktioniert nicht (siehe Post #6).

 

[Arndtinho]

@Maik:
Das funktioniert aber leider nicht bei der jetztigen Struktur.

@Gumbo:
Wie dann?

 

[Maik]

Achja?

Bei mir funktioniert es in dieser Struktur erwartungsgemäß einwandfrei.

 

[Maik]

Ansonsten kannst du es ja auf die"veraltete" Weise machen:

.clear { clear:both; }

<div id="content" >
        <div id="content_top"></div>
        <div id="content_row">
                <font class="content_row_header">Titel</font>
                <br><br>
                <div style="float: left; width: 385px;">bla<br>bla</div>
                <div style="float: right; width: 385px;">bla</div>
                <div style="float: left; width: 25px;">leer</div>
                <div class="clear"></div>
        </div>
        <div id="footer"></div>
</div>

 

[Arndtinho]

@Maik
Wenn ich die Sache mit dem "clearfix" mache, wird das komplette Grunddesign zerstört. Die jetzige Sache bezieht sich nur auf den Contentbereich, in den die Inhalte Dynamisch geladen werden und eine variable Höhe besitzen können.