<div> nicht innerhalb eines <div> im FF

Status
Nicht offen für weitere Antworten.
HTML: 
<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:
Code: 
/* 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
 
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.
 
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.
 
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.
 
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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück