Meine Überzeugung, dass man mit CSS grundsätzlich mal alles machen kann ist zerstört :(
Erstmal: Mit keiner Sprache kann man "alles" machen.
CSS1 bietet im Bezug auf den Aufbau der Seite wenig. Damals ging es erstmal drum Farben, Ränder, Abstände etc aus HTML rauszunehmen.
Einzig float wäre da zu nennen, aber wie man bei der Arbeit mit float schnell merkt, war das ursprünglich für einfache Dinge wie Bilder in Fließtexten zu positionieren angedacht, und nicht um damit einen ganzen Seitenaufbau zu konstruieren. Siehe zB diesen Kommentar (http://www.designbyfire.com/000111.html) (etwas runterscrollen).
CSS2 bietet beim Seitenaufbau da schon viel mehr und das schon seit 6 Jahren, aber leider kennt der marktführende Browser IE CSS2 praktisch nicht, einzig wichtige Ausnahme: position.
Position ist wie der Name schon sagt zur Positionierung angedacht. Das Problem: Wenn man mehrere Spalten hat, aber bei dynamischen Seiten nicht weiß, welche von den Spalten die längste werden wird, hat man ein Problem. Denn der Fußtext muß ja unter die längste Spalte drunter, man kann aber nur eine relativ positionieren, die dann die Gesamthöhe des Containers angibt.
Dynamische Seiten mit mehreren Spalten die alle gleich lang sind, gehen natürlich schon. Mal ein Beispiel, wobei das nicht unbedingt der Weisheit letzter Schluß ist. There you go:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Volle Höhe</title>
<style type="text/css">
#header {
background-color: #00C;
color: white;
text-align: center;
}
#container {
display: table;
}
#menu, #text, #links {
display: table-cell;
vertical-align: top;
padding: 1em;
}
#menu {
width: 15%;
background-color: #C00;
}
#article {
background-color: #EEE;
}
#links {
width: 150px;
background-color: #CC0;
}
#footer {
background-color: #0CC;
text-align: center;
}
</style>
</head>
<body>
<h1 id="header">Dreispaltiger Aufbau in voller Höhe mit CSS</h1>
<div id="container">
<div id="menu">
<h3>Menü</h3>
<ul>
<li>Eins</li>
<li>Zwei</li>
<li>Drei</li>
</ul>
</div>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque venenatis hendrerit neque. Morbi purus pede, interdum ac, pellentesque eu, dictum eget, arcu. Duis mattis, neque at convallis commodo, mauris urna rhoncus quam, a tincidunt erat sem consectetuer lectus. In auctor, sem in fringilla egestas, orci diam porta ligula, id lacinia diam lorem vitae turpis. Curabitur id lacus. Aliquam est. Sed metus. Quisque a dolor. Donec tempus. Suspendisse augue sapien, pulvinar sit amet, varius vitae, auctor quis, urna. Fusce erat sapien, aliquam at, aliquam quis, tristique et, elit. Etiam porta est non leo.</p>
<p>Curabitur nulla tellus, commodo volutpat, porttitor in, congue a, tellus. Morbi eget nibh sed urna feugiat porta. Phasellus fermentum. Vestibulum turpis felis, mattis eu, mattis sed, dignissim vel, diam. Sed sagittis sodales metus. Suspendisse potenti. Ut nunc nunc, ornare id, posuere id, convallis a, mi. Nam rhoncus. Nullam lobortis accumsan orci. Quisque nibh eros, viverra ut, placerat sit amet, tempor quis, lectus. Vivamus sit amet orci vel dolor sodales aliquam. Nam hendrerit gravida nisl. In in tortor et pede egestas rhoncus. Nam blandit metus vel ipsum. Duis id dolor ac dui feugiat ornare. Mauris metus. Morbi euismod molestie mauris. </p>
<p>Jede Spalte ist solange wie die längste der drei Spalten, der Fußtext bleibt immer unten. Der HTML Code ist ganz einfach aufgebaut, die komplette Darstellung erfolgt mit CSS. Dabei bleibt auch noch alles variabel und einfach änderbar.</p>
</div>
<div id="links">
<h3>Links</h3>
<ul>
<li>Seite A</li>
<li>Seite B</li>
<li>Seite C</li>
<li>Seite D</li>
<li>Seite E</li>
</ul>
</div>
</div>
<p id="footer">Sinnloser Fußtext</p>
</body>
</html>
Mit dem IE sieht das böse aus. Man kann mit Hacks zwar drum rumkommen, aber das ist ja auch nicht das Wahre... DU kannst beispielsweise ein zweites Stylesheet in die Seite einbauen (in dem du dann mit float oder was auch immer arbeitest) und dies dem IE zuweisen.
Schau dir auch noch die Faux Coloumns (http://www.alistapart.com/articles/fauxcolumns/) an. Sind noch viele weitere gute Artikel auf A list apart zu finden.
Eigentlich sollte das Kind-Element ja die Grösse des Eltern-Elements als 100% vererbt bekommen. Das funktioniert irgendwie nur, wenn man die Eltern-Grösse auf den Pixel genau festlegt.
Und wie groß ist dein Elternelement? Das oberste Element ist das Browserfenster. Darunter kommt das HTML Element, dann das BODY Element, dann die anderen Elemente. Das solltest du bedenken. Wenn du mittendrin einem Element sagst es soll so hoch wie sein Elternelement sein, dann hilft das nichts wenn das Elternelement für deine Zwecke auch schon zu klein ist.
Meine Probleme bei position: abolute;: Wenn das menu länger ist als der Seiteninhalt, dann steht das menue über... Könnte man mit einigen z-index-dummys lösen, waäre aber unschön.
Meine Probleme bei float: left/right;: Im eigentlichen Seiteninhalt kann man kein clear: left/both/right; mehr verwenden
Das Problem bei float versteh ich zwar nicht, aber zu den absolut positionierten Elementen: http://www.shauninman.com/mentary/past/clear_positioned_elements.php oder noch eine Reihe weiterer Artikel bei A list apart. Wühl mal dort in der CSS Sektion. "Schön" ist das aber alles nicht.
Das einfachste wäre es wohl noch die absolute Positionierung aufzugeben...