Hallo,
vor einiger Zeit gab es hier mal die Frage, wie man das klassische 2 Spaltenlayout (links Navigation, rechts Inhalt) für Websiten ohne Tabellen hinbekommen kann. Das Problem an den vorgeschlagenen Lösungen, die alle mit float arbeiteten war, dass man eine feste Breite angeben mußte. Dadurch passierte es, dass das Layout ein wenig durcheinander geriet, wenn der User den Schriftgrad skaliert hat.
Ich bin jetzt auf eine relativ einfache Lösung gestoßen, die ich euch nicht vorenthalten möchte;-).
Der Trick ist einfach, die Breiten nicht in Pixeln oder Prozent sondern in der Maßeinheit em einzugeben. Diese ist relativ und bezieht sich auf die Schriftgröße. D.h., wenn der User die Schriftgröße verändert, verändert sich die Breite der Spalte mit.
Ein Beispiel gibts hier: www.stareagle.de/sonstiges/spalten.html
Nichts besonderes, soll nur zur verdeutlichungen dienen.
Anregungen und Kritik sind willkommen.
MfG
Stareagle
Homepage selbermachen 7.846 Themen, 35.563 Beiträge
Wobei ich für das Umfließen inzwischen eine halbwegs brauchbare Lösung gefunden habe:
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
body {
background-color:#ffffff;
font-family:Arial;
}
.cols, .nav, .content {
margin:0em;
padding:0em;
}
.nav, .content {
padding:0.4em;
}
.cols {
background-color:#cccccc; /* =: .nav {background-color} */
}
.nav {
float:left;
/* background-color := .cols {background-color} */
}
.content {
position:relative;
background-color:#cccccc; /* := body {background-color} */
border-left:0.15em solid #ffffff;
margin-left:3.4em;
}
background-color:#ffffff;
font-family:Arial;
}
.cols, .nav, .content {
margin:0em;
padding:0em;
}
.nav, .content {
padding:0.4em;
}
.cols {
background-color:#cccccc; /* =: .nav {background-color} */
}
.nav {
float:left;
/* background-color := .cols {background-color} */
}
.content {
position:relative;
background-color:#cccccc; /* := body {background-color} */
border-left:0.15em solid #ffffff;
margin-left:3.4em;
}
<div class="cols"><div class="nav">
<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
</div><div class="content">
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
</div></div>
<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
</div><div class="content">
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
Hier kommt viel Inhalt in Form von Text und was noch so dazu gehört rein...
</div></div>
Leider rückt der IE hier allerdings den Text leiht ein (ohne sinnigen Grund). Siehe rote Linen:
Gruß
Borlander