Promaetheus
Mitglied
Ich habe bisher immer mit Tabellen und OHNE (ja ich weiss ich sollte mich schämen) DOCTYPE gearbeitet. Das hatte den grossen Vorteil dass ich ganz simpel ein 3-spaltiges Layout mit 100% Höhe erstellen konnte. Nun wollte ich mich jedoch der Zeit anpassen und das Ganze mittels DIV´s lösen, denke aber dass das unmöglich wenn man nicht auf JavaScript oder ähnliches zurückgreift.
Hier habe ich ein Beispiel-Layout mit Tabellen, welches absolut simpel und kurz ist (Beispiel online: TABELLEN):
Ich hatte dann versucht das Ganze mittels DIV´s und CSS zu lösen, komme jedoch auf keinen grünen Zweig damit das Ganze genau so dargestellt wird, sprich über 100% der Höhe wenn wenig Text vorhanden ist, sich jedoch anpasst wenn mehr Text darinsteht.
Gibt es überhaupt eine "normale" Lösung mit DIV´s und CSS um diese Problematik zu behandeln?
Ich habe mal versucht eine Lösung mit DIV´s anzustreben, jedoch bekomme ich die 100% nicht in den Griff (Beispiel online DIV´s):
Hier habe ich ein Beispiel-Layout mit Tabellen, welches absolut simpel und kurz ist (Beispiel online: TABELLEN):
Code:
<html>
<head>
<title>3-spaltiges Layout mit 100% Höhe</title>
</head>
<body topmargin="0">
<table border="0" cellpadding="10" cellspacing="0" width="700" height="100%" align="center">
<tr>
<td width="100%" colspan="3" height="150" bgcolor="#808080" align="center">Header</td>
</tr>
<tr>
<td height="100%" bgcolor="#FF0000" valign="top">Linke Spalte</td>
<td height="100%" bgcolor="#FFFF00" valign="top">Inhalt, bzw. mittlere Spalte</td>
<td height="100%" bgcolor="#009933" valign="top">Rechte Spalte</td>
</tr>
<tr>
<td width="100%" colspan="3" height="50" bgcolor="#666666" align="center">Footer</td>
</tr>
</table>
</body>
</html>Ich hatte dann versucht das Ganze mittels DIV´s und CSS zu lösen, komme jedoch auf keinen grünen Zweig damit das Ganze genau so dargestellt wird, sprich über 100% der Höhe wenn wenig Text vorhanden ist, sich jedoch anpasst wenn mehr Text darinsteht.
Gibt es überhaupt eine "normale" Lösung mit DIV´s und CSS um diese Problematik zu behandeln?
Ich habe mal versucht eine Lösung mit DIV´s anzustreben, jedoch bekomme ich die 100% nicht in den Griff (Beispiel online DIV´s):
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
*{
padding: 0;
margin: 0;
border: 0px none;
}
html, body {
height: 100%;
background: #FFFFFF;
text-align: center;
}
#container {
width: 700px;
margin: 0 auto;
text-align: left;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%; /* IE */
background: #FFFFFF;
}
#header {
padding: 10px;
line-height: 150px;
background: #808080;
text-align: center;
}
#box_links {
float: left;
clear: left;
background: #FF0000;
width: 150px;
}
#box_mitte {
float: left;
padding: 0 2em 60px 2em;
background: #FFFF00;
}
#box_rechts {
float: right;
clear: right;
background: #009933;
}
#footer {
width: 100%;
line-height: 50px;
background: #666666;
position: absolute;
bottom: 0;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Header</div>
<div id="box_links">Linke Spalte</div>
<div id="box_mitte">Inhalt, bzw. mittlere Spalte</div>
<div id="box_rechts">Rechte Spalte</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Zuletzt bearbeitet:
