Nach dem sich CSS2 mehr und mehr etabliert kann man gefloatete Seitenlayouts auf ganz neue Art und Weise durchführen.
Erstmal der Quelltext:
[code style=”css”]
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.floatbox {
overflow: hidden;
}
.col {
float: left;
width: 200px;
}[/code]
<div class="floatbox clearfix"> <div class="col"><p>LINKS</p></div> <div class="col"> <p>Lorem ipsum dolor sit amet, consectetue.</p> <p> Donec quam felis, ultricies nec, pellentesque.</p> <p> In enim justo, rhoncus ut, imperdiet a!</p> </div> </div>
Das wichtigste befindet sich in den Klassen ‘clearfix’ und ‘floatbox’. Mit ‘clearfix’ bedienen wir uns CSS2 und fügen nach
einem float den clear gleich mit ein. Ein extra html Element, um den float abzuschließen,
wird hierfür nicht verwendet (die Pseudo-Klasse :after erledigt das für uns).
Als zweites schaffen wir uns einen neuen Anzeigekontext mit ‘overflow: hidden|auto’. Dieser Kontext bewirkt das ein ‘clear’ sich z.B. nicht Global auf die gesamte Seite auswirkt, sondern nur auf den gewollten Bereich. Auch richtet dieser Bereich die Inhalte neu aus. So muss ein float mit unterschiedlicher Länge, welcher auf der Folgeseite um fließt, nicht mit seltsamen margins auf Kurs gehalten werden (z.B. margin-left: 205px). Die weitere Positionierung und Abstandseinstellung verläuft so wie man es erwartet!
Mehr Informationen findet man hier:
Floats 1
Floats 2
Floats 3
0 Comments