div Container – Ich bin zu blöd
Verfasst: 13.07.2011, 17:23
Hallo Freunde,
ich bin gerade dabei ein Layout komplett mit divs statt Tabellen aufzuziehen. Anfänglich liefs gut, doch jetzt häng ich und hab auch keine Lösung bei diversen Tutorial-Seiten gefunden
Es geht um 2 einfache Dinge:
1. Wenn ich in der Navi (.navi_left) und im Contenbereich (.content_main) etwas schreibe und umbreche, dann soll sich die Größe des umliegenden DIV-Containers (#content) vertikal mit vergrößern. Das tut er aber bis jetzt nicht, sonder hängt drüber.
2. Die vertikale Größe der Layer soll immer 100% betragen, sodass der Footer DIV (#footer) am unteren Rand des Browsers hängt.
Es wäre echt super, wenn mir einer von euch auf die Sprünge helfen könnte, denn ich verzweifle hier noch
[/code]
ich bin gerade dabei ein Layout komplett mit divs statt Tabellen aufzuziehen. Anfänglich liefs gut, doch jetzt häng ich und hab auch keine Lösung bei diversen Tutorial-Seiten gefunden
Es geht um 2 einfache Dinge:
1. Wenn ich in der Navi (.navi_left) und im Contenbereich (.content_main) etwas schreibe und umbreche, dann soll sich die Größe des umliegenden DIV-Containers (#content) vertikal mit vergrößern. Das tut er aber bis jetzt nicht, sonder hängt drüber.
2. Die vertikale Größe der Layer soll immer 100% betragen, sodass der Footer DIV (#footer) am unteren Rand des Browsers hängt.
Es wäre echt super, wenn mir einer von euch auf die Sprünge helfen könnte, denn ich verzweifle hier noch
Code: Alles auswählen
<body>
<div id="root">
<div id="head">
</div>
<div id="content">
<div class="navi_left">
Navigation<br>
test<br>
test<br>
test<br>
</div>
<div class="content_main">
Inhalt
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Code: Alles auswählen
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
color: #555555;
height:100%;
margin: 0px auto;
padding:0px;
}
#root {
width:900px;
min-height: 100%;
height: 100%;
margin: 0px auto;
text-align: left;
color: #666666;
background-color: #ffffff;
}
#head {
height: 100px;
border: 1px solid #cccccc; border-top: 0px;
margin: 0px 0px 20px 0px;
}
#content {
min-height: 100%;
height:100%;
border: 1px solid #cccccc;
margin: 0px;
}
.navi_left {
width: 170px;
min-height: 100%;
height:100%;
float: left;
border: 0px solid #ffffff;
background-color: #f8f8f8;
padding: 30px 0px 0px 20px;
}
.content_main {
width: 688px;
min-height: 100%;
height: 100%;
float: right;
border: 0px;
padding: 30px 0px 0px 20px;
}
#footer {
border: 0px solid #cccccc; border-bottom: 0px;
background-color: #333333;
height: 100px;
margin: 0px;
}