Kind-Divs in Eltern-Div nebeneinander positionieren

J

JtR

Grünschnabel
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: 
<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:
Code: 
#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ß
 
Hallo JtR

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

Quellcode meiner Lösung:
Code: 
#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
 
Moin,

ihkawiss hat gesagt.:
  • Damit nun das Eltern-DIV nicht einfach oben hängenbleibt habe ich overflow: auto; verwendet.

Quellcode meiner Lösung:
Code: 
#body {
	width: 640px;
	position: relative;
	border: 1px solid red;
	overflow: auto;
}
Zum Vergrößern anklicken....
die Alternative zur overflow-Regel wäre das Beenden der Float-Umgebung mittels der clear-Eigenschaft.

CSS: 
.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:

HTML: 
<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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück