Wer floats in html mag, wird diese lieben.

Nach dem sich CSS2 mehr und mehr etabliert kann man gefloatete Seitenlayouts auf ganz neue Art und Weise durchführen.
Erstmal der Quelltext:

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.floatbox {
  overflow: hidden;
}
.col {
  float: left;
  width: 200px;
}
<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

Marius Hein
Marius Hein
Head of Development

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert, dann als Application Developer gearbeitet und ist nun Leiter der Softwareentwicklung. Ausserdem ist er Mitglied im Icinga Team und verantwortet dort das Icinga Web.