Design per CSS - FLOAT

Über das Float-Element kann eine Ausrichtung von Elementen geschehen.

Float (engl. = fließen, Hin- und Herbewegung) bestimmt wie ein Blockelement reagieren soll - im Klartext, neben dem Blockelement dürfen sich weitere Elementen befinden, die ansonsten unterhalb platziert würden.

Beispiel Bildervorschau (ohne Links zur Vereinfachung)

<style type="text/css">
<!--
.bildvorschau {
   border:2px dotted orange;
   float:left;
}
-->
</style>

<img class="bildvorschau" src="ax.gif" />
<img class="bildvorschau" src="ax.gif" />
...
<img class="bildvorschau" src="ax.gif" />

Und die entsprechende Ausgabe im Browser dann:

Interessant ist, was passiert, wenn der Platz im Anzeigefenster nicht ausreicht - dann wird einfach in die nächste Zeile umgebrochen. Das ist ein Grund, warum manche Websitenbauer das FLOAT-Element in den Wahnsinn treibt: - aber es ist halb so wild.

Website-Layout mit Float, DIVs, CLASS und ID

Und endlich kommen wir zu dem wichtigen Punkt - Layout einer Website mit CSS.

Wir wollen im ersten Beispiel ein 2 spaltiges Layout (links Steuerung, rechts Inhalt) erstellen. Quellcode vereinfacht ohne Links - es geht erst mal ums Prinzip.

Startseite
Impressum

Hier HTML und CSS lernen und die eigene Website erstellen - selbst ist der Mensch

Der entsprechende Quellcode:

<style type="text/css">
 <!--
 #navi {
   float:left;
   background-color:thistle;
   width:  150px;
 }
 
 #inhalte {
   background-color:lightblue;
   width:  300px;
   height: 100px;
 }
 -->
 </style>
 
 <div id="navi">
 <ul>   <li>Startseite</li>
   <li>Impressum</li>
 </ul>
 </div>
 
 <div id="inhalte">
 Hier HTML und CSS lernen und die eigene Website erstellen - selbst ist der Mensch
 </div>

Und im folgenden Beispiel ist zu sehen, wie ein float:right wirkt - am besten auch selber probieren!

Startseite
Impressum

Hier HTML und CSS lernen und die eigene Website erstellen - selbst ist der Mensch

sauberes 2 Spalten Layout

OK - dass bei float das Element von weiteren Inhalten "umflossen" wird, mag nicht jedem gefallen, aber es ist der erste Schritt. Die zweite Box (mit dem Inhalt) kann jetzt z.B. über margin ausgerichtet werden. Gleiches Beispiel oben.

<style type="text/css">
 <!--
 #navi {
   float:left;
   background-color:thistle;
   width:  150px;
 }
 
 #inhalte {
   background-color:lightblue;
   margin-left: 200px;
   width:  300px;
   height: 100px;
 }
 -->
 </style>
 
 <div id="navi">
 <ul>   <li>Startseite</li>
   <li>Impressum</li>
 </ul>
 </div>
 
 <div id="inhalte">
 Hier HTML und CSS lernen und die 
 eigene Website erstellen - selbst ist der Mensch
 </div>

Und das Ergebnis davon

Startseite
Impressum

Hier HTML und CSS lernen und die eigene Website erstellen - selbst ist der Mensch

CSS 2 Spalten Layout - Inhaltsbereich passt sich vorhandener Breite an

Gleiches Beispiel wie oben, nun soll sich aber der Bereich für den Inhalt die verfügbare Breite nutzen (und wenn das Browserfenster verkleinert wird, automatisch kleiner werden). Zusätzlich wird die Breiten nicht mehr mit Pixel definiert, sondern über "em".

<style type="text/css">
<!--
#navi {
    float:left;
    width:13em;
    background-color:thistle;
}
#inhalte {
    margin-left: 14em;
    background-color:lightblue;
}
-->
</style>

<div id="navi">
  <ul>
    <li>Startseite</li>
    <li>Impressum</li>
  </ul>
</div>

<div id="inhalte">
  Hier HTML und CSS lernen und die
  eigene Website erstellen - selbst ist der Mensch
</div>

Und das Ergebnis davon selber probieren und dann Browserfenster in der Breite variieren!

CSS 2 Spalten Layout - Inhaltsbereich und Steuerung passen sich vorhandener Breite an

Gleiches Beispiel wie oben, nun sollen sich beide Bereiche der verfügbaren Breite automatisch anpassen - dazu werden die Breiten in Prozenten definiert.

<style type="text/css">
<!--
 #navi {
    float:left;
    width:20%;
    background-color:thistle;
 }

 #inhalte {
    margin-left: 80%;
    background-color:lightblue;
 }
 -->
 </style>

 <div id="navi">
   <ul>
     <li>Startseite</li>
     <li>Impressum</li>
   </ul>
 </div>

 <div id="inhalte">
    Hier HTML und CSS lernen und die
    eigene Website erstellen - selbst ist der Mensch
 </div>

Und das Ergebnis davon selber probieren und dann Browserfenster in der Breite varrieren!

vorheriges Kapitel: DIV und SPANs

nächstes Kapitel: Seitenbreite in CSS begrenzen