Next generation floating in HTML

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

Marius Hein

Head of IT Service Management

---

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert und viele Jahre in der Softwareentwicklung gearbeitet. Mittlerweile ist er Herr über die interne IT und als Leiter von ITSM zuständig für die technische Schnittmenge der Abteilungen der NETWAYS Gruppe. Wenn er nicht gerade IPv6 IPSec Tunnel bohrt, sitzt er daheim am Schlagzeug und treibt seine Nachbarn in den Wahnsinn.

Lies mehr von Marius und triff unser Team