Beispiel 3

CSS Tipp | Beispiel1 | Beispiel2 | Beispiel3 | Beispiel4

Section
Section
Section

<main>
	<section>Section</section>
	<section>Section</section>
	<section>Section</section>
	<hr>
</main>
<footer>Footer</footer>

Hier wird die Linie mit clear:both versehen. Dadurch ist sie das erste Element welches unter den gefloateten Elementen angezeigt wird. Da die Linie innerhalb des main liegt, muss das main entsprechend größer werden, um die hr unter den Sections anzuzeigen. So sieht man nun die Hintergrundfarbe bis nach unten. weiter

main{background-color:#57D8D2;}
footer{background-color:#FCD277;}
section{width:33%; float:left;}
main hr{clear:both;}