• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage CSS - Footer bleibt ab "Float" nicht mehr unten

duti

Mitglied
Hallo Community

Ich hab ein kleines Problem. Ich möchte dass mein Footer unten bleibt. Soweit so gut, mein aufbau sieht folgendermassen aus.

HTML:
<body>
<div id="main">
    <div id="header">
    </div>
    <div id="slider">
    </div>
    <div id="content">
        <div id="clinks">
            <f:format.raw>{content}</f:format.raw>
        </div>
        <div id="crechts">   
            <f:format.raw>{contentre}</f:format.raw>
        </div>
    </div>
</div>
    <div id="bottom">
    </div>
</body>


Code:
#main{
    height:100%;
    width:auto;
    position:relative;
    background-color:orange;
}

#header{
    height:88px;
    width:100%;
    background-color:blue;
    position:relative;

}

#slider{
    height:300px;
    width:100%;
    background-color:red;
    position:relative;

    
}

#content{
    
    height:auto;
    width:1000px;
    position:relative;
    background-color:green;
}


#clinks{
    height:auto;
    width:500px;
    background-color:silver;
    float:left;
}

#crechts{
    height:auto;
    width:500px;
    background-color:grey;
    float:left;
}



#bottom{
    min-height:350px;
    height:auto;
    width:100%;
    position:absolute;
    background-color:yellow;

}

Sobald ich bei den Div´s clinks und crechts einen "float" einbaue rutscht (Div Bottom) einfach wieder hoch.
Ich habe sogar bei clinks und crechts Inhalt drin. Sobald ich die float´s wieder raus nehme ist (Div Bottom) wieder ganz normal unten.

mfg Duti
 
Werbung:
Okay ich konnte bei mir nicht ganz nachvollziehen, was du genau meintest.
Ich kann dir aber schon einmal sicher sagen, dass das, was du versuchst in einem riesigen Disaster endet.
Float ist (in aller Regel) immer ein schlechte Idee.
Erklär mal, was dein Vorhaben ist, dann schauen wir, was die beste Umsetzungsmethode ist.

Ganz nebenbei:
Weißt du wie man Klassen setzt? Du verwendest hier ja ausschließlich IDs. Das würde dir ne Menge Code sparen.
 
Danke für die Antwort.
Ich möchte eigentlich nur meinen Content in 2 teilen, damit ich die mit Typo3 separat befüllen kann.
Ich hab seit Monaten leider nichts mehr in Richtung Homepage gemacht, deswegen was mir noch im Kopf geblieben ist, sind die IDs xD.
Der Content soll sich je nach Inhalt von der höhe her anpassen, egal ob jetzt "clinks" oder "crechts" höher ist. Das "funktioniert" auch eigentlich, nur sind dann die DIVs "clinks" und "crechts" übereinander statt nebeneinander und das sieht nicht schön aus.

mfg duti
 
Werbung:
Also Klassen setzt du durch das hinzufügen eines Punktes:
.testclass
wird dann zu class="testclass"
soviel dazu.

Alles was du mit Floats machen kannst, kannst du auch mit Flexboxen machen.
Floats ist wirklich eine schlechte Variante.
Außerdem passen sich divs automatisch an die Höhe des Inhalts an.
 
Sobald ich bei den Div´s clinks und crechts einen "float" einbaue rutscht (Div Bottom) einfach wieder hoch.

Weil der float nicht gecleared wurde, Auf #content gehört ein Clearfix. Einfach mal googeln.

Der Content soll sich je nach Inhalt von der höhe her anpassen, egal ob jetzt "clinks" oder "crechts" höher ist.

Verwende dazu ein Grid-Layout wie Bootstrap. Das gibt es wahlweise mit Floats und Flexbox und nimmt die lästigen Positionierungsprobleme ab.
 
Werbung:
Ich danke euch viel mal!
Ich hab es mit Flexbox versucht, funktioniert einwandfrei und vor allem sehr einfach!
Da wird ja wirklich überall abgeraten Float zu verwenden.
Übrigens vielen Dank noch für den Tipp mit den Klassen. Hab echt schon lange nichts mehr mit Homepages zutun gehabt, werde nun auch mit Klassen arbeiten.
 
Zurück
Oben