nicht angemeldet
Hallo,
ich weiß, dass es zu dieser Frage unendlich viele Beiträge gibt, bekomme das, was ich umsetzen will, aber trotzdem nicht hin.
Ich möchte eine Seite entwerfen mit einem 800px breiten zentrierten container-div. Dieses div soll immer 100% höhe einnehmen.
Hierin soll ein header-div und ein navi-div stecken. Das navi-div soll links unterhalb des headers positioniert sein und auch immer eine höhe von 100% haben. Leider bekomme ich das nicht hin, obwohl ich fast alles, was ich hier oder woanders gefunden habe ausprobiert habe.
Hier meine index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="head"> head</div>
<div id="navi">navigation</div>
</div>
</body>
</html>
hier meine style.css:
html, body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height: 100%;
border: thin dotted #000000;
width: 800px;
margin-left:auto;
margin-right:auto;
margin-bottom:0;
}
* #container {
height: 100%;
}
#head {
width: 795px;
border: thin dotted #FF0000;
margin-left:auto;
margin-right:auto;
}
#navi {
width:200px;
border: thin solid #0000FF;
min-height:100%;
float:left;
}
Ich habe schon so viel probiert, doch es treten immer andere Probleme auf. In dem hier geposteten Beispiel ist die container-box ca. 15px zu kurz und die navi-box läuft unten über diese herüber.
Vielleicht kann mir ja jemand helfen und diese "Standard-Frage speziell für diesen Fall beantworten.