✔ float-Eigenschaft auf div-container funktioniert im FF nicht

  • Themenstarter Themenstarter kollmann84
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
K

kollmann84

Moin Leute,

irgenwie bin ich ganz schön ratlos.
So bald ich die float-Eigenschaft auf ein div-Container, verschachtelt in einem anderen div-Container, anwende zieht er den Container einfach aus dem übergeordneten Container raus. Und ich frage mich warum!
Im IE wird alles super dargestellt, aber der FF kriegt es einfach nicht gebacken.


Hier mal ein bisschen Code:

Die HTML-Seite

HTML: 
<body>
<div id="wrap">
	<div id="logo">&nbsp;</div>
         <div id="content">
         	<div id="l_col">
                 	<div class="inside">
<p>text text text text text text text text text text text text text text text text text  <a href="blubb.html">Link</a></p>
                         </div>
                 </div>
              	<div id="r_col">
                      <div id="foto"></div>
                      <div id="adresse">
                           <div class="inside"></div>
                      </div>
                      <div id="ozeiten">
                           <div class="inside"></div>
                      </div>
                 </div>
         </div>
</div>
</body>


und das Style-sheet im Wesentlichen:

Code: 
@charset "ISO-8859-1";
body {
color: rgb(0,31,86);
padding: 15px;
text-align: center;
font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
font-size: 11px;
}
.inside {
padding: 15px;
}
div#wrap {
background-color: #fbf3e0;
border: 2px solid #872943;
margin: 0 auto;
text-align: left;
width: 600px;
}
div#logo {
background-color: #872943;
background-image: url(../images/logo.png);
background-position: left;
background-repeat: no-repeat;
border-bottom: 2px solid #872943;
height: 102px;
}
div#l_col {
float: left;
width: 425px;
}
div#r_col {
border-left: 1px dashed #872943;
width: 174px;
}
div#content {
margin: 10px 0;
}

Vielen Dank für eure Hilfe!!
 
Hi,

ich kann mit deinen Quellcode-Angaben keine Unterschiede in den genannten Browsern entdecken.
 
öhm...bei mir auch nicht wirklich, aber ich gebe dir mal den Code ungekürzt.

Und dann vergleiche bitte nochmal....

HTML-Seite:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Kiel">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrap">
	<div id="logo">&nbsp;</div>
         <div id="content">
         	<div id="l_col">
                 	<div class="inside">
                         	<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texty</p>
				<p>text text text text text text text text text text text text text text text text text  <a href="blubb.html">Link</a></p>
                         </div>
                 </div>
              	<div id="r_col">
                      <div id="foto"></div>
                      <div id="adresse">
                           <div class="inside"></div>
                      </div>
                      <div id="ozeiten">
                           <div class="inside"></div>
                      </div>
                 </div>
         </div>
</div>
</body>
</html>

Style-sheet:

Code: 
@charset "ISO-8859-1";
body {
color: rgb(0,31,86);
padding: 15px;
text-align: center;
font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
font-size: 11px;
}
.inside {
padding: 15px;
}
div#wrap {
background-color: #fbf3e0;
border: 2px solid #872943;
margin: 0 auto;
text-align: left;
width: 600px;
}
div#logo {
background-color: #872943;
background-image: url(../images/logo.png);
background-position: left;
background-repeat: no-repeat;
border-bottom: 2px solid #872943;
height: 102px;
}
div#l_col {
float: left;
width: 425px;
}
div#r_col {
border-left: 1px dashed #872943;
float: left;
width: 174px;
}
div#content {
margin: 10px 0;
}
div#foto {
border: 1px solid #872943;
margin: 10px;
}
div#adresse {
text-align: center;
}
div#ozeiten {
text-align: center;
}
a {
color: rgb(0,31,86);
font-style: italic;
}
a:link {
}
a:visited {
}
a:hover {
color: #872943;
}
a:active {
color: #872943;
text-decoration: none;
}
p {
margin-bottom: 15px;
}

Das macht mir Probleme!
 
Okay, jetzt sieht die Sache doch gleich ganz anders aus ;)

Die Floatumgebung muss zum Abschluss noch gecleart werden, damit die umschliessende Box den Inhalt in voller Höhe umschliesst, und nicht von ihm am unteren Elementrand "überlappt" wird - siehe hierzu http://positioniseverything.net/easyclearing.html.


Code: 
.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 */
Code: 
<div id="content" class="clearfix"> ... </div>
 
Suuuuuuuuper, das funktioniert :D

auf so was wäre ich in der Art nicht gekommen, hatte es mit
Code: 
clear: both;
für den div#content probiert aber das klappte auch nicht.

Jetzt bin ich mache ich mir das erst mal durch den angegebenen Link verständlich.

Und vielen Dank noch mal Dann kann ich jetzt ja beruhigt in den Feierabend gehen ;-)
 
kollmann84 hat gesagt.:
auf so was wäre ich in der Art nicht gekommen, hatte es mit
Code: 
clear: both;
für den div#content probiert aber das klappte auch nicht.
Zum Vergrößern anklicken....
Wenn, dann müsstest du innerhalb von #content nach den beiden Spaltenblöcken ein weiteres DIV mit dieser CSS-Eigenschaft einbinden:

Code: 
<div id="wrap">
        <div id="logo">&nbsp;</div>
         <div id="content">
                 <div id="l_col">
                         <div class="inside">
                                <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text texty</p>
                                <p>text text text text text text text text text text text text text text text text text  <a href="blubb.html">Link</a></p>
                         </div>
                 </div>
                 <div id="r_col">
                      <div id="foto"></div>
                      <div id="adresse">
                           <div class="inside"></div>
                      </div>
                      <div id="ozeiten">
                           <div class="inside"></div>
                      </div>
                 </div>
                 <div style="clear:both;"></div>
         </div>
</div>
Das Pseudoelement clearfix:after in Verbindung mit der content-Eigenschaft dient zum automatischen Generieren von Inhalten, womit das inhaltsleere Element im Markup nicht mehr benötigt wird.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück