Jan K.: 3 Spaltiges Layout, Probleme mit float

Beitrag lesen

SELF-Forum

3 Spaltiges Layout, Probleme mit float

Jan K.
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich möchte gerne die DIV-Container für Header, Menü, Inhalt und Footer in einen übergeordneten Container "Page" verpacken.

Der Page-Container (rote Umrandung) wächst leider nicht mit dem Inhalt mit.
Ausserdem würde ich gerne den Fotter zentrieren was ich nicht hinbekomme.

Irgendwie scheine ich da was mit den floats zu vermasseln. Hilfe!

Gruß, Jan

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">  
<head>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
<title>Layout:versuch1</title>  
<link rel="stylesheet" href="css/styles.css" type="text/css" />  
</head>  
<body>  
  
<div id="page">  
	<div id="header">  
	Dies soll mal ein Header Werden und zentriert sein  
	</div>  
	<div id="menue_links">  
	Menue_links  
	</div>  
	<div id="inhalt">  
	Inhaltsbereich  
	</div>  
	<div id="footer">  
	Mittiger Footer  
	</div>  
</div>  
  
</body>  
</html>  


  
body{  
	margin: 0px;  
	font-size: 100.01%;  
}  
div#page{  
	width:800px;  
	margin:0 auto;  
	border:2px solid red;	  
}  
div#header{  
	position:relative;  
	margin:0 auto;  /* standardkonforme horizontale Zentrierung */  
	width:600px;  
	border:2px solid blue;  
}  
div#menue_links{  
	position:relative;  
	width:200px;  
	height:600px;  
	border:2px solid #585bd6;  
	float:left;  
	/*--background-color:#585bd6;*/  
}  
div#inhalt{  
	position:relative;  
	width:592px;  
	height:600px;  
	float:left;  
	border:2px solid green;  
}  
div#footer{  
	position:relative;  
	margin:0 auto;  /* standardkonforme horizontale Zentrierung */  
	width:600px;  
	float:left;  
	border:2px solid silver;  
}
Beitrag melden
–
Informationen zu den Bewertungsregeln