Tutorial: 3 Divs nebeneinander setzen

[Extremefall]

Hallo,
da vielleicht mehrere auf das Problem stoßen, dass die Divs nicht automatisch nebeneinander gesetzt werden, sondern z.B. auf einer unterschiedlichen Höhe sich befinden, schreibe ich ein kleines Tutorial.

#linkespalte {
width: 20%;
height: 10%;
float: left;
background-color: #000000;
}
#mittlerespalte{
margin-left: 40%;
margin-right: 10%;
height: 37px;
background-color: #000000;
}
#rechtespalte{
width: 40%;
height: 10%;
float:right;
background-color: #000000;
}

Wie man sehen kann, wird die Größe der linken und rechten Spalte festgelegt. Außerdem wird der rechte und linke DIV Container gefloatet. Diese Version hatte ich auch immer selbst heraus bekommen. Das ist ja auch noch nicht wirklich schwer verständlich.

Nun kommt der "Trick":
Es muss folgende Reihenfolge im Quelltext eingehalten werden: Links, Rechts, Mitte

Da hatte ich sehr lange dran getüftelt, bis ich hier im Forum die Lösung fand: http://www.html.de/html-und-xhtml/35410-probleme-mit-3-divs-nebeneinander.html

Also der HTML Code könnte so aussehen:

<div id="linkespalte">linke Spalte</div><div id="rechtespalte">rechte Spalte</div><div id="mittlerespalte">mittlere Spalte</div>

Ich hoffe, damit kann ich so manchem helfen.

 

[threadi]

Mit unterschiedlichen Hintergrundfarben wäre es etwas einleuchtender für manch einen Leser ;)

 

[neuroleptika]

Wenn alle Spalten eine Breite in Prozent haben, halte ich das nicht für empfehlenswert.
Nur wenn die Spalten Breiten in unterschiedlichen Einheiten bekommen müssen, würde ich vielleicht sowas ähnliches empfehlen.