Jan K.: 3 Spaltiges Layout, Probleme mit float

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;  
}  

  1. Hallo Jan,

    wenn Du dem Element div#page die CSS-Eigenschaft "overflow: hidden" gibst, wird sich die Höhe des Elements an den darin vorhandenen Elementen anpassen.

    Für den Footer solltest Du den Textfluss wieder aufheben (clear:both). Dann sollte er wie gewünscht zentriert ausgerichtet sein.

    Herzliche Grüße aus Weinsberg
    Helmut Weber

    --
    -------------------------------------------
    Mode ist eine Variable, Stil eine Konstante
    1. Overflow und Clear funktionieren bestens,
      vielen Dank!

  2. @@Jan K.:

    nuqneH

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

    Einen solchen brauchst du nicht.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Das wird mir so von Typo3 vorgegeben, dafür kann ich nix!

      1. @@Jan K.:

        nuqneH

        Das wird mir so von Typo3 vorgegeben, dafür kann ich nix!

        ?? Das glaube ich nicht. Du solltest TYPO3 dazu bringen können, das zu tun, was du willst.

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)