# Zugehörigkeit zu Div-Container ignoriert



## Merlin732 (19. Juli 2007)

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.








```
<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


----------



## Maik (19. Juli 2007)

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:


```
<div class="contentBox clearfix">...</div>
```


----------



## Merlin732 (19. Juli 2007)

Also ich habe im Template <div class="contentBox"> auf <div class="contentBox clearfix"> geändert und in die CSS-Datei 

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


----------



## Maik (19. Juli 2007)

Setz mal die Selektoren, wie aus dem Artikel, ein:


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


----------



## Merlin732 (19. Juli 2007)

Hab ich. Bringt aber nichts.


----------



## Maik (19. Juli 2007)

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.


----------



## Merlin732 (19. Juli 2007)

Argh. Also liegt der Fehler an einer anderen Stelle oder wie siehst du es?
Die Frage ist nur wo.


----------



## Maik (19. Juli 2007)

Scheint so, dass bei dir irgendwas nicht stimmt.

Du kannst ja mal den Quellcode vergleichen:


```
<!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>
```


----------



## Merlin732 (20. Juli 2007)

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!


----------



## Merlin732 (25. Juli 2007)

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?


----------



## Maik (25. Juli 2007)

Hi,

kannst du mal den aktuellen und vollständigen Quellcode (HTML + CSS) der Seite nachreichen, denn in deinem bisherigen Quelltext taucht die Klasse *.csc-textpic* nirgends auf, und in meinem letzten Beispiel wird der Inhalt des DIVs *#content* nicht zu tief angezeigt.


----------



## Merlin732 (25. Juli 2007)

Hallo, 

also der vollständige Code ist etwas viel.

Ich würde mal versuchen es einzugrenzen. Im Bereich .content wird der entsprechende Inhalt der Seite gewrapt. Unter anderem könnte dies ein Text mit Bild - Element sein.
Diese Elemente haben den Typ csc-textpic und enthalten Bilder vom Typ csc-textpic-image und Text vom Typ csc-textpic-text. Natürlich gibt es noch andere Klassen, aber das Problem hängt mit den Bildern zusammen.
Diese Bilder werden an der richtigen Stelle angezeigt. Der folgende Text beginnt jedoch stets erst unter dem linken Menu. Wenn man den Text über das Bild bringt und das Bild drunter anfängt, so startet das nächste Contentelement erst unter dem Menu.
Anders gesagt, sobald ein Bild vorkommt ist Platz bis unter das Menu und erst dann kommt das nächste Element.


----------



## Maik (25. Juli 2007)

Dann nenn doch einfach den Link zur Seite, bevor du hier eine Abhandlung über die involvierten Typen (Klassen) schreibst, die keinem so recht weiterhilft.


----------



## Merlin732 (26. Juli 2007)

Die Seite liegt im Intranet ... sonst würde ich ja keine "Abhandlung" schreiben


----------



## Maik (26. Juli 2007)

Dann reduzier eben den Quellcode auf die relevanten Komponenten, oder hänge hier ein kleines Beispiel an, damit man Gelegenheit hat, sich das näher anzuschauen.

Ansonsten musst du dich gedulden, bis die tutorials.de-Glaskugel aus dem Sommerurlaub zurückkehrt.


----------



## Merlin732 (27. Juli 2007)

Hey,

also der Fehler liegt in den CSS-Klassen, welche um das Text-Bild-Element gewrappt werden.

Ich habe bereits 2 Dinge beheben können ... mittels 

```
/* Elemente ohne Lücke ausrichten*/
DIV.csc-textpic-above DIV.csc-textpic-text { clear: none; float:left;} 
DIV.csc-textpic-left DIV.csc-textpic-text { clear:none; }
```

An einem Punkt gibt es aber noch Probleme, die Inhalte von unten fließen neben das Text-Bild-Inhaltselement, da diese float:left hat ... allerdings finde ich keinen Weg dies durch clear zu beheben, da die äußeren Bereiche immer Anteil haben (also Produkte, Menu).

Der Quelltext sieht für diesen Abschnitt folgendermaßen aus:

```
<div class="content">
<!-- CONTENT ELEMENT, uid:39/text [begin] -->
<a id="c39">
</a>
<!-- Header: [begin] -->
<h1>

Unser Anspruch - ausfallsichere IT-Systeme

</h1>
<!-- Header: [end] -->
<!-- Text: [begin] -->
<p class="bodytext">

Clusterlösungen sind High Availability Solutions, bei denen ein Verbund von mehreren Servern so arbeitet, dass bei Ausfall eines Servers das gesamte System arbeitsfähig bleibt.

<br>
<br>

Mit einer geeigneten Lösung kann auf diese Art und Weise eine besonders hohe Ausfallsicherheit geschäftskritischer Prozesse gewährleistet werden.

</p>
<!-- Text: [end] -->
<!-- CONTENT ELEMENT, uid:39/text [end] -->
<!-- CONTENT ELEMENT, uid:40/textpic [begin] -->
<a id="c40">
</a>
<!-- Header: [begin] -->
<h1>

Schematische Darstellung eines 2-Node-Clusters

</h1>
<!-- Header: [end] -->
<!-- Image block: [begin] -->
<div class="csc-textpic csc-textpic-left csc-textpic-above">
<div class="csc-textpic-imagewrap">
<dl style="width: 250px;" class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol">
<dt>
<a target="thePicture" onclick="openPic('http://cms:81/ccsite/index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2Fclusterscsi_01.png&width=800m&height=600m&bodyTag=%3Cbody%20style%3D%22margin%3A0%3B%20background%3A%23fff%3B%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=07bac11901119a64a90df1aeb2fd7722','thePicture','width=350,height=350,status=0,menubar=0'); return false;" href="index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2Fclusterscsi_01.png&width=800m&height=600m&bodyTag=%3Cbody%20style%3D%22margin%3A0%3B%20background%3A%23fff%3B%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=07bac11901119a64a90df1aeb2fd7722">
<img width="250" height="250" border="0" alt="Schematische Darstellung eines 2-Node-Clusters" src="typo3temp/pics/be315e8af7.png">
</a>
</dt>
<dd class="csc-textpic-caption">

Untertitel

</dd>
</dl>
</div>
<div class="csc-textpic-text">
<!-- Text: [begin] -->
<p class="bodytext">

Genug Text um eine Zeile zu füllen. Genug Text um eine Zeile zu füllen. enug Text um eine Zeile zu füllen. Genug Text um eine Zeile zu füllen. Genug Text um eine Zeile zu füllen.

</p>
<!-- Text: [end] -->
</div>
</div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:40/textpic [end] -->
<!-- CONTENT ELEMENT, uid:41/text [begin] -->
<a id="c41">
</a>
<!-- Header: [begin] -->
<h1>

Strukturelle Hardwarekonfigurationen von Clustern

</h1>
<!-- Header: [end] -->
<!-- Text: [begin] -->
<p class="bodytext">

Clusterlösungen können mit unterschiedlichen Hardwarekonfigurationen realisiert werden. Dabei werden die derzeit 3 möglichen Varianten aufgrund verschiedener Aspekte unterschieden.

</p>
<p class="bodytext">
<a class="internal-link" target="_self" title="Öffnet einen internen Link im aktuellen Fenster" href="cc_high_availability/clusterloesungen/cluster_hardwarebasis/">

mehr Informationen ...

</a>
</p>
<!-- Text: [end] -->
<!-- CONTENT ELEMENT, uid:41/text [end] -->
<!-- CONTENT ELEMENT, uid:42/text [begin] -->
<a id="c42">
</a>
<!-- Header: [begin] -->
<h1>

Merkmale und Eigenschaften von Clustern

</h1>
```

und die CSS-Klassen (ungeändert) für das Text-Bild-Element folgendermaßen:

```
/* default styles for extension "tx_cssstyledcontent" */
	/* Captions */
	DIV.csc-textpic-caption-c .csc-textpic-caption { text-align: center; }
	DIV.csc-textpic-caption-r .csc-textpic-caption { text-align: right; }
	DIV.csc-textpic-caption-l .csc-textpic-caption { text-align: left; }

	/* Needed for noRows setting */
	DIV.csc-textpic DIV.csc-textpic-imagecolumn { float: left; display: inline; }

	/* Border just around the image */
	DIV.csc-textpic-border DIV.csc-textpic-imagewrap .csc-textpic-image IMG {
		border: 2px solid black;
		padding: 0px 0px;
	}

	DIV.csc-textpic-imagewrap { padding: 0; }

	DIV.csc-textpic IMG { border: none; }

	/* DIV: This will place the images side by side */
	DIV.csc-textpic DIV.csc-textpic-imagewrap DIV.csc-textpic-image { float: left; }

	/* UL: This will place the images side by side */
	DIV.csc-textpic DIV.csc-textpic-imagewrap UL { list-style: none; margin: 0; padding: 0; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI { float: left; margin: 0; padding: 0; }

	/* DL: This will place the images side by side */
	DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image { float: left; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT { float: none; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD { float: none; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG { border: none; } /* FE-Editing Icons */
	DL.csc-textpic-image { margin: 0; }
	DL.csc-textpic-image DT { margin: 0; display: inline; }
	DL.csc-textpic-image DD { margin: 0; }

	/* Clearer */
	DIV.csc-textpic-clear { clear: both; }

	/* Margins around images: */

	/* Pictures on left, add margin on right */
	DIV.csc-textpic-left DIV.csc-textpic-imagewrap .csc-textpic-image,
	DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap .csc-textpic-image,
	DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap .csc-textpic-image {
		display: inline; /* IE fix for double-margin bug */
		margin-right: 10px;
	}

	/* Pictures on right, add margin on left */
	DIV.csc-textpic-right DIV.csc-textpic-imagewrap .csc-textpic-image,
	DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap .csc-textpic-image,
	DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap .csc-textpic-image {
		display: inline; /* IE fix for double-margin bug */
		margin-left: 10px;
	}

	/* Pictures centered, add margin on left */
	DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
		display: inline; /* IE fix for double-margin bug */
		margin-left: 10px;
	}
	DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption { margin: 0; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG { margin: 0; }

	/* Space below each image (also in-between rows) */
	DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image { margin-bottom: 5px; }
	DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow { margin-bottom: 5px; display: block; }
	DIV.csc-textpic DIV.csc-textpic-imagerow { clear: both; }

	/* No margins around the whole image-block */
	DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-firstcol { margin-left: 0px !important; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-lastcol { margin-right: 0px !important; }

	/* Add margin from image-block to text (in case of "Text w/ images") */
	DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap,
	DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap {
		margin-right: 10px !important;
	}
	DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap,
	DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap {
		margin-left: 10px !important;
	}

	/* Positioning of images: */

	/* Above */
	DIV.csc-textpic-above DIV.csc-textpic-text { clear: both; }

	/* Center (above or below) */
	DIV.csc-textpic-center { text-align: center; /* IE-hack */ }
	DIV.csc-textpic-center DIV.csc-textpic-imagewrap { margin: 0 auto; }
	DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image { text-align: left; /* Remove IE-hack */ }
	DIV.csc-textpic-center DIV.csc-textpic-text { text-align: left; /* Remove IE-hack */ }

	/* Right (above or below) */
	DIV.csc-textpic-right DIV.csc-textpic-imagewrap { float: right; }
	DIV.csc-textpic-right DIV.csc-textpic-text { clear: right; }

	/* Left (above or below) */
	DIV.csc-textpic-left DIV.csc-textpic-imagewrap { float: left; }
	DIV.csc-textpic-left DIV.csc-textpic-text { clear: left; }

	/* Left (in text) */
	DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap { float: left; }

	/* Right (in text) */
	DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap { float: right; }

	/* Right (in text, no wrap around) */
	DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap { float: right; clear: both; }
	/* Hide from IE5-mac. Only IE-win sees this. \*/
	* html DIV.csc-textpic-intext-right-nowrap .csc-textpic-text { height: 1%; }
	/* End hide from IE5/mac */

	/* Left (in text, no wrap around) */
	DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap { float: left; clear: both; }
	/* Hide from IE5-mac. Only IE-win sees this. \*/
	* html DIV.csc-textpic-intext-left-nowrap .csc-textpic-text { height: 1%; }
	/* End hide from IE5/mac */
```

Sieht jemand eine Möglichkeit es passend zu kombinieren?


----------

