Die Eigenschaft float
Die Eigenschaft float plaziert Elemente im Textfluss und lässt andere um dieses herumfließen. So ist es z.B. möglich eine Grafik oder einen <div>-Container rechts- bzw. linksbündig auf der Seite zu plazieren und den Text daneben vorbeifließen zu lassen.
Ein <div>-Container für das Menü
Der folgende <div>-Container wird in diesem Beispiel als Menü verwendet:
<div id="menucontainer"> <p class="menutitle">MENÜ</p> » <a class="menu" href="#">HYPERLINK 1</a><br /> » <a class="menu" href="#">HYPERLINK 2</a><br /> » <a class="menu" href="#">HYPERLINK 3</a><br /> » <a class="menu" href="#">HYPERLINK 4</a><br /> » <a class="menu" href="#">HYPERLINK 5</a><br /> </div>
und das Stylesheet sieht so aus:
#menucontainer {
border:1px solid #606060;
background-color:#dddddd;
width:120px;
float:left;
padding:5px;
margin:0px 5px 5px 0px;
line-height:30px;
}
.menutitle
{
margin:-5px -5px 5px -5px;
padding:2px;
background-color:#cccccc;
font-weight:bold;
border-bottom:1px solid #606060;
}
Der ID-Selektor menucontainer verknüpft
die Stylesheet-Angaben mit dem <div>-Container.
Wichtig ist die Angabe float:left.
Sie legt fest, dass das Menü linksbündig auf der Seite plaziert wird und der nachfolgende
Inhalt rechts vorbeifließt.
Und margin:0px 5px 5px 0px; bestimmt den rechten und unteren Abstand zwischen
Menü und Inhalt.
Der Menütitel soll farblich hervorgehoben sein und direkt am Rahmen beginnen.
Das funktioniert aber normalerweise nicht, da für den <div>-Container ein
Innenabstand festgelegt ist.
Deshalb bestimmt margin:-5px -5px 5px -5px; einen negativen
Außenabstand für das <p>-Tag,
sodass sich Innen- und Außenabstand gegenseitig aufheben