Zugehörigkeit zu Div-Container ignoriert

Status
Nicht offen für weitere Antworten.
M

Merlin732

Erfahrenes Mitglied
Hallo,

mein Layout besteht nur aus Div-Boxen und 3 Spalten, welche durch Float positioniert sind. Im IE klappt es einwandfrei. Im Firefox wird die mittlere Spalte bei der Höhenberechnung vollkommen ignoriert, d.h. die mittlere Spalte sollte ja mindestens so lang sein wie das Menu und max. die Länge des eigenen Inhaltes haben. Leider wird das Menu links ignoriert und die mittlere Spalte viel zu kurz angezeigt.

prob.jpg


Code: 
<div class="contentBox">
		<div class="topimage_bg">
			<div class="topimage">Banner</div>
		</div>
		<div class="linke_seite">
			<div class="img_navi">Bild für Navigation</div>
			<div class="nav_li">Navigation</div>
			<div class="search_li">Suche</div>
		</div>
		<div class="produkte">Produkte</div>
		<div class="content">Content</div> 
	</div>



.contentBox {
	padding-bottom: 20px;
	margin: 20px auto 0px auto;
	border: 1px solid #C85486;
	width: 753px;
	background-color: #fff;
}

.linke_seite {
	height: 10px;
	width: 180px;
	margin: 10px 0px 20px 0px;
	background-color: #FFFFFF;
	float: left;
	position: relative;
	left: -15px;
}

.produkte { 
    float:right;
    width:75px; 
	margin-left:10px;
	text-align: center;
	margin-top: 15px;
} 
.content {
	margin-left: 180px;
	margin-right: 75px;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal;
	color: #000000; text-decoration: none; text-align: justify; padding:3px 10px 10px 0px;

}

Wäre toll wenn jemand eine Lösung wüsste, habe schon diverse Foren abgeklappt und viel versucht ... aber es will einfach nicht.

Danke
 
Hi,

die Floatumgebung muß zum Abschluß noch "gecleart" werden, damit das Elternelement seine tatsächliche Höhe annimmt - siehe hierzu http://positioniseverything.net/easyclearing.html

Die in dem Artikel vorgestellte Klasse clearfix wird dann zusätzlich im DIV contentbox aufgerufen:

Code: 
<div class="contentBox clearfix">...</div>
 
Also ich habe im Template <div class="contentBox"> auf <div class="contentBox clearfix"> geändert und in die CSS-Datei
Code: 
.contentBox .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.contentBox .clearfix {display: inline-block;}

eingetragen. Leider tut sich nichts, obwohl der Artikel das Problem eigentlich lösen sollte.
 
Setz mal die Selektoren, wie aus dem Artikel, ein:

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 */
 
Also bei mir umschliesst nun die Box contentBox alle eingebetteten DIVs - siehe Anhang.

Ansonsten entferne mal die height-Deklaration aus dem DIV .linke_seite, oder wandel sie für die modernen Browser in eine Mindesthöhe um, da sie die height-Eigenschaft als feste Höhe ansehen.
 

Anhänge

  • demo_Merlin732.jpg
    demo_Merlin732.jpg
    55,2 KB · Aufrufe: 18
Scheint so, dass bei dir irgendwas nicht stimmt.

Du kannst ja mal den Quellcode vergleichen:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title></title>

<style type="text/css">
<!--
.contentBox {
        padding-bottom: 20px;
        margin: 20px auto 0px auto;
        border: 1px solid #C85486;
        width: 753px;
        background-color: #fff;
}

.linke_seite {
        min-height: 10px; /* Mindesthöhe in modernen Browser */
        height: auto !important; /* !important-Regel für moderne Browser */
        height: 10px; /* "Mindesthöhe" in IE */
        width: 180px;
        margin: 10px 0px 20px 0px;
        background-color: #FFFFFF;
        float: left;
        position: relative;
        left: -15px;
}

.produkte {
    float:right;
    width:75px;
        margin-left:10px;
        text-align: center;
        margin-top: 15px;
}
.content {
        margin-left: 180px;
        margin-right: 75px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: normal;
        color: #000000;
        text-decoration: none;
        text-align: justify;
        padding:3px 10px 10px 0px;

}

.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 */
-->
</style>

</head>
<body>

<div class="contentBox clearfix">
     <div class="topimage_bg">
          <div class="topimage">Banner</div>
     </div>
     <div class="linke_seite">
          <div class="img_navi">Bild für Navigation</div>
          <div class="nav_li">Navigation</div>
          <div class="search_li">Suche</div>
     </div>
     <div class="produkte">Produkte</div>
     <div class="content">
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
     </div>
</div>

</body>
</html>
 
hey,

min-height: 10px; /* Mindesthöhe in modernen Browser */
height: auto !important; /* !important-Regel für moderne Browser */

waren der Schlüssel zum Erfolg. Ich werde mir das Problem abschließend nochmal klar machen.

Großes Danke an dich!
 
Hey ich muss das Thema nochmal eröffnen, da der Firefox nun andere Inhalte nicht richtig darstellt. Konkret mein ich damit ein Inhaltselement .content .csc-textpic.
Es zwar mittig, also am richtigen Platz horizontal, aber erst unter dem Menu, d.h. zu vertikal viel zu tief angezeigt.

Es muss etwas mit float zu tun haben :)
Weiß jemand Rat?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück