Ergebnis 1 bis 4 von 4
  1. #1
    dertypdernixkan ist offline Tripel-As
    registriert
    31-05-2013
    Beiträge
    194

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

    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)

    HTML-Code:
    <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:

    Code:
    <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....
    lo.1.JPG

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

    Das funzt auch mit mit div 2und 3
    lo.3.JPG

    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

  2. #2
    j-l-n Guest

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

    Zitat Zitat von dertypdernixkan Beitrag anzeigen
    Falls das jemals jemandem helfen sollte, bitte sehr
    Danke, ist nicht unpraktisch

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.700

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

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

  4. #4
    dertypdernixkan ist offline Tripel-As
    registriert
    31-05-2013
    Beiträge
    194

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

    @kkapsner

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

Ähnliche Themen

  1. Position: Float, Clear Both und offsetHeight BUG
    Von Splitt3r im Forum CSS und (X)HTML
    Antworten: 4
    Letzter Beitrag: 16-08-2010, 21:18
  2. Problem mit float und clear
    Von hidingmyfame im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 05-08-2008, 17:52
  3. 2 divs in einem rechtsbündig mit float und clear
    Von Toxictype im Forum CSS und (X)HTML
    Antworten: 13
    Letzter Beitrag: 29-11-2007, 20:40
  4. CSS mit float und clear Hintergrundbild...schnief...
    Von Toxictype im Forum CSS und (X)HTML
    Antworten: 7
    Letzter Beitrag: 17-08-2007, 03:09
  5. IE-Bug: Falsches float nach clear.
    Von klofi im Forum CSS und (X)HTML
    Antworten: 0
    Letzter Beitrag: 10-11-2005, 18:50

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •