Danke für den Hinweis. Ich hab die Seite diesbezüglich noch einmal überarbeitet und eine Art "Workaround" gebastelt:
Code:
.footer {
padding:0px;
background-color: #F8FD95;
border: 1px solid #E4F004;
clear:both; /* <-- hier */
}
.navigation {
width:250px;
float:left;
padding:4px;
background-color:#FFC1C2;
border:1px solid #FB0006;
margin:0px;
margin-bottom:10px; /* <-- hier */
}
.content {
padding:4px;
background-color:#B3FFB7;
border:1px solid #20FF2C;
margin:0px 0px 0px 268px;
margin-bottom:10px; /* <-- hier */
}
.container {
margin:10px 0px 0px 0px;
overflow:visible; /* <-- hier */
}
Das Problem ist, dass sich der "container"-div auf Grund des float-Attributs des "navigation"-divs nicht an die Höhe dieses DIVs anpasst, wenn dieser höher als der "content"-div ist. Ich habe daher den "margin-bottom" jeweils in "content" und "navigation" definiert und dafür bei "container" rausgenommen. Ich verstehe aber ehrlich gesagt nicht ganz, warum sich der "container"-div nicht richtig anpasst
@Rolf:
Klassen- und ID-Angaben können miteinander kombiniert werden, indem in einem Element ganz einfach beide Attribute angegeben werden. Dabei ist zu beachten, dass das ID-Attribut "mächtiger" als das Class-Attribut ist, d.h. wenn in beiden die gleiche Eigenschaft mit unterschiedlichen Werten definiert wurde, dann wird die Style-Angabe aus dem ID-Attribut bevorzugt.
Wenn du sowohl links- als auch rechtsbündigen Text nebeneinander haben willst, kannst du folgendes machen:
Code:
<div class "footer">
linksbuendig
<div id="footerright">
rechtsbuendig
</div>
</div>
Und im Stylesheet:
Code:
#footerright {
text-align:right;
float:right;
}
Edit: Musste gerade feststellen, dass das auch erst ab IE8 zu funktionieren scheint. Da muss ich mir wohl noch was überlegen... Zur Not könnte man auch eine Tabelle mit zwei Spalten nehmen, wenn sich die älteren Browser querstellen...