# <div> nicht innerhalb eines <div> im FF



## Arndtinho (20. November 2007)

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 (20. November 2007)

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 (20. November 2007)

Wie sollte es denn aussehen?


----------



## Arndtinho (20. November 2007)

@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 (20. November 2007)

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


----------



## Maik (20. November 2007)

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


----------



## Arndtinho (20. November 2007)

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

@Gumbo:
Wie dann?


----------



## Maik (20. November 2007)

Achja?

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


----------



## Maik (20. November 2007)

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 (20. November 2007)

@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.


----------



## Maik (20. November 2007)

Dann zeig doch bitte mal den kompletten Code der Seite.


----------



## Arndtinho (20. November 2007)

```
<div id="layout_container">
		
		<div id="colLeft">
			<div id="logo_colLeft">
				{include file="i_logo.tpl"}
			</div>
			
			<div id="content_colLeft">
				{if $smarty.session.user}
					{include file="i_menu.tpl"}
				{/if}
			</div>		
			
			{if $smarty.session.user}
				<div id="footer_colLeft">
					<div style="float:left; padding-left: 12px; padding-top: 0px; text-align: center;">
						{$todaysdate}
		    			</font>
		    		</div>
		    		<div style="float: right;">
		    			<img src="./img/footerlogo.gif" border=0>
		   	 	</div>
		  	</div>
		  {/if}
		    	
			<div id="colFooter">
				{include file="i_sessiondata.tpl"}
			</div>
		</div>
		
		<div id="colRight">
			{if $smarty.session.user}
				<div id="colHeader">
					{include file="i_header.tpl"}
				</div>
			{else}
				<div id="colHeader" style="border-bottom: 1px solid #4682b4;"></div>	
			{/if}
			
			<div id="content_colRight">
				{if $smarty.session.user}
					{include file=$tbody}
				{else}
					{include file="usr_login.tpl"}
				{/if}
			</div>
			
			<div id="colFooter">
				{include file="i_footer.tpl"}
			</div>
		</div>
	</div>
```
Und alles was wir bisher besprochen hatten bezieht sich auf den Bereich "conten_colRight". Das entsprechende CSS:

```
/* IE CSS */
* html #colRight { 
   float:               right; 
   margin-left:         0px;
}

* html #content_colRight { 
   padding-top:         0px;
} 

* html #menu_top {
   width:               164px;
}

* html #menu_sub_1 {
   width:               144px;
}

* html #menu_sub_2 {
   width:               124px;
}
/* IE CSS Ende */
/***************/

/************/
/** Layout **/
html, body {
   margin:              0px;
   padding:             0px;
}

#layout_container {
   width:               100%;
   height:              100%;
}

#colLeft {
   float:               left;
   position:            relative;
   min-height:          100%;
   height:              auto !important;
   height:              100%;
   width:               165px;
   background:          #F3F4F5;
   border-right:        1px solid #4682b4;      
}

#logo_colLeft {
   background:          #b0c4de;                
   text-align:          center;
}

#content_colLeft {}

#footer_colLeft {
   bottom:              0 !important;
   bottom:              -1px; 
   width:               97%; 
   margin-bottom:       25px; 
   position:            absolute;
}

#colRight {
   margin-left:         166px;
   width:               auto;
   position:            relative;
   min-height:          100%;
   height:              auto !important;
   height:              100%;
}

#content_colRight {
   padding-left:        10px;
   padding-top:         5px;
   width:               810px;
}

#colHeader {
   height:              20px;
   width:               100%;
   background:          #b0c4de;                
   border-bottom:       1px solid #4682b4;      
   border-top:          1px solid #4682b4;      
}

#colFooter {
   width:               100%;
   position:            absolute;
   height:              20px;
   bottom:              0 !important;
   bottom:              -1px;
   background:          #b0c4de;                
   border-top:          1px solid #4682b4;      
   border-bottom:       1px solid #4682b4;      
}

#footer_session {
   float:               left; 
	height:              18px;
   text-align:          center; 
	color:               #fff;
	font-size:           10px;
   font-family:         Verdana, Arial, Helvetica, sans-serif; 
   padding-top:         3px;
}
/** Layout - Ende **/
/*******************/

/************/
/** Inhalt **/
#container {
   margin-top:          10px;
   width:               810px;
   height:              auto;
   background-color:    #FFFFFF;
}

#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;
}
/** Inhalt - Ende **/
/*******************/


/*-------------------------------------------*/
/*  Einschließen von Floats - variable Hoehe */
.clearfix:after {
    content:         "."; 
    display:         block; 
    height:          0; 
    clear:           both; 
    visibility:      hidden;
}

.clearfix {
   display:          inline-block;
}

/* speziell IE-mac */
* html .clearfix {
   height:           1%;
}

.clearfix {
   display:          block;
}
/* End hide from IE-mac */
/*--------------------------------------------*/
```
Gruß
Arndtinho


----------



## Maik (20. November 2007)

Kannst du die Seite mal online zur Verfügung stellen, denn mit dem Template-Code lässt sich nicht viel anfangen, und einen Screenshot von der jetzigen Seitendarstellung erspar ich uns, denn der hat mit dem bisherigen nicht viel gemeinsam.


----------



## Arndtinho (20. November 2007)

leider nicht. zumindest nicht so wie es jetzt ist. da es sich um eine firmeninterne geschichte handelt. ich werde aber heute abend mal einen "prototyp" (nur die <div>-Elemente) online stellen.


----------



## Maik (20. November 2007)

Naja, wie auch immer: auf jeden Fall muss die Floatumgebung mittels der clear-Eigenschaft aufgehoben werden, damit die umschliessende Box vom Inhalt nicht überlappt wird und bei zunehmenden Inhalt "mitwächst".

Die zwei Möglichkeiten, die dir hierfür zur Verfügung stehen, hab ich dir genannt und mit den entsprechenden Quellcodes dokumentiert.


----------



## Arndtinho (20. November 2007)

Ok. Danke Dir erstmal. Ich werde mir die Sache nochmals Stück für Stück anschauen und prüfen wo das "clearfix" gesetzt werden muß. Später stelle ich dann noch mal den "Prototypen" online.

Gruß
Arndtinho


----------



## Arndtinho (20. November 2007)

So, hier ist der Prototyp: Layout

Gruß
Arndtinho


----------

