# Kind-Divs in Eltern-Div nebeneinander positionieren



## JtR (28. Juli 2010)

Hallo zusammen,

ich habe ein Frage bezüglich der Positionierung von 2 Divs in einem Eltern-Div.
Die Situation ist wie auf diesem Bild.

HTML:

```
<html>
	<head>
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	
	<body>
		<div id="body">
			<div id="leftmenu">
			</div>
			<div id="middle">
				<div id="text">
				</div>
			</div>
		</div>
	</body>
</html>
```

CSS:

```
#body {
	width: 640px;
	position: relative;
	border: 1px solid red;
}

#middle {
	width: 478px;
	border: 1px solid blue;
}

#leftmenu {
	padding-top: 97px;
	width: 158px;
	height: 300px;
	border: 1px solid green;
}

#text {
	text-align: justify;
	width: 438px;
	font: 12px Verdana;
	margin: 20px;
	overflow: hidden;
	min-height: 450px;
	border: 1px solid lime;
}
```

Der Text-DIV (Hellgrün) soll je nach Inhalt wachsen und hat eine Mindesthöhe. Den
 umgebenden Middle-DIV (blau) möchte ich neben den Leftmenu-DIV (dunkelgrün) verschieben.
Allerdings soll der Body-div (rot) in jedem Fall an der Unterkante vom Middle-DIV aufhören.

Ich hoffe ich habe mich einigermaße verständlich ausgedrückt.
Für Hilfe wäre ich überaus dankbar.

Gruß


----------



## ihkawiss (28. Juli 2010)

Hallo JtR


Um die beiden DIVs nebeneinander darzustellen habe ich ihnen die Eigenschaft float:left zuweisen.
Damit nun das Eltern-DIV nicht einfach oben hängenbleibt habe ich overflow: auto; verwendet.

Quellcode meiner Lösung:

```
#body {
	width: 640px;
	position: relative;
	border: 1px solid red;
	overflow: auto;
}
 
#middle {
	width: 478px;
	border: 1px solid blue;
	float:left;
}
 
#leftmenu {
	padding-top: 97px;
	width: 158px;
	height: 300px;
	border: 1px solid green;
	float:left;
}
 
#text {
	text-align: justify;
	width: 438px;
	font: 12px Verdana;
	margin: 20px;
	overflow: hidden;
	min-height: 450px;
	border: 1px solid lime;
}
```

Ich denke dies sollte das gewünschte Resultat liefern, hoffe konnte dir helfen. 

Grüsse ihkawiss


----------



## Maik (1. August 2010)

Moin,



ihkawiss hat gesagt.:


> Damit nun das Eltern-DIV nicht einfach oben hängenbleibt habe ich overflow: auto; verwendet.
> 
> Quellcode meiner Lösung:
> 
> ...


die Alternative zur *overflow*-Regel wäre das Beenden der Float-Umgebung mittels der *clear*-Eigenschaft.


```
.clearfix:after {
content:".";
display:block;
height:0;
font-size: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 */
```

Der Klassenbezeichner *.clearfix* wird hierfür zusätzlich im DIV *#body* aufgerufen:


```
<div id="body" class="clearfix">
```

Siehe hierzu auch meinen "Webmaster FAQ"-Artikel CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an? 

mfg Maik


----------

