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 Grafiken 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 jedes Menü
Die folgenden <div>-Container werden in diesem Beispiel als Menü verwendet:
<div id="menucontainer1"> <p class="menutitle">MENU 1</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> <div id="menucontainer2"> <p class="menutitle">MENU 2</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:
#menucontainer1,#menucontainer2 {
border:1px solid #ffffff;
background-color:#336666;
width:120px;
padding:5px;
margin:5px;
line-height:30px;
color:#ffffff;
}
#menucontainer1 {
float:left;
}
#menucontainer2 {
float:right;
}
.menutitle
{
margin:-5px -5px 5px -5px;
padding:2px;
background-color:#003333;
color:#eeeeee;
font-weight:bold;
border-bottom:1px solid #ffffff;
}
Die ID-Selektoren menucontainer1
und menucontainer2
verknüpfen die Stylesheet-Angaben mit den <div>-Containern.
Wichtig sind die Angaben float:left und
float:right.
Sie legen fest, dass das Menü 1 linksbündig und das Menu 2 rechtsbündig auf der Seite
plaziert wird und der nachfolgende Inhalt rechts an Menu 1 und links an Menu 2 vorbeifließt,
also zwischen beiden in der Mitte hindurch.
margin:...; bestimmt die Abstände 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