CSS - Float und Clear in der Praxis - ein kleines Tut

[dertypdernixkan]

Oft liest man Fragen von Anfängern die sich auf das Positionieren von DIV's beziehen und das anschließende Problem, dass nachfolgende Elemente "komisch" dargestellt werden. Das liegt am Floating und oft, wenn nicht sogar immer am fehlenden Clearing.

Hier mal eine kleine Anleitung wie man mit float und clear arbeiten kann. In diesem Beispiel gibt es 6 DIV's, einen äußeren (kann der body sein) einen Header, 3 mittlere welche mit einer minmalen und maximalen height versehen sind und den Footer. Als kleine Info, die 3 mittleren Blockelemnte (DIV) passen sich dem Inhalt an und behalten trotzdem ihre optischen Regeln ein.

Hier das html: (ohne das Grundgerüst)

<div id="aussen">
         <div id="head"></div>

         <div id="1" class="middl"></div>

         <div id="2" class="middl"></div>

         <div id="3" class="middl"></div>

         <div id="4" class="clear_both"></div>
</div>

und hier die css:

<style>
#aussen {
    float: left;
    position: relative;
    top: 30px;
    left: 30px;
    width: 800px;
    min-height: 300px;
    max-height: auto;
    border: 1px solid black;
}

#head {
    float: left;
    clear: both;
    position: relative;
    width: 767px;
    min-height: 50px;
    max-height: auto;
    margin: 10px;
    padding: 5px;
    border: 1px solid black;
}

.middl {
    float: left;
    position: relative;
    width: 244px;
    min-height: 150px;
    max-height: auto;
    margin: 10px;
    border: 1px solid black;
}

.clear_both {
    float: left;
    clear: both;
    position: relative;
    width: 767px;
    min-height: 50px;
    max-height: auto;
    margin: 10px;
    padding: 5px;
    border: 1px solid black;
}
</style>

Hier seht ihr wie es normal aussieht. Recht unspektakulär, zugegeben....


..der "Clou" folgt aber sofern einer der mittleren 3 DIV's einen längeren Inhalt bekommt!


Das funzt auch mit mit div 2und 3


Bei diesem Beispiel habe ich den mittleren DIV's die Klasse "middl" -worüber ich sie im CSS-teil anspreche- und absteigend eine ID von 1 zu 2 zu 3 verpasst. Im Code dazu steht unter "middl" "float: left;" welches dann in der Klasse ".clear_both" mit dem Befehl "clear: both;" auflöse.

Und damit halten die 3 mittleren immer denselben Abstand zum Footer (class="clear_both") ein.

Eine weitere Möglichkeit stellt das Clearing mit html dar. Dazu kann man direkt unter dem zu clearenden Element ein <br clear="all"> setzen. Das lohnt sich wenn der Content aus einer Datenbank geholt wird, bspw. bei php-Gästebüchern.

Falls das jemals jemandem helfen sollte, bitte sehr

 

[j-l-n]

Falls das jemals jemandem helfen sollte, bitte sehr

Danke, ist nicht unpraktisch

 

[kkapsner]

Ganz nett, aber das HTML ist invalide, da IDs nicht mit einer Zahl beginnen dürfen...

 

[dertypdernixkan]

@kkapsner

darauf habe ich der Einfachheit wegen mal nix gegeben. Hätte es auch als Zahlwort schreiben können, das stimmt