✔ Übergeordnetes div streckt sich nicht mit.

[Spelmann]

Wenn ich das mache, verschiebts mir im Firefox den komplette div spalte-mitte um das Maß der Bildhöhe nach unten. Im Netscape wird so aber alles korrekt dargestellt.

(Opera war mein Fehler. Bilder ausgeschaltet. peinlich :-()

Sollte man das ganze Layout vielleicht völlig anders aufbauen?

 

[Maik]

Bei mir verschiebt sich dadurch im FF (2.0.0.8) nichts nach unten:

 

[Spelmann]

Hallo Maik.

Ich habe es einfach nochmal neu angelegt mit deinen Änderungen. Jetzt funktioniert es bis auf NN. Da beginnt der Text jetzt plötzlich ganz oben, aber das werde ich mir schon mit irgendeinem Hack zusammenfingern.

Ich danke Dir sehr für Deine Hilfe und wünsche ein schönes Wochenende.

 

[Maik]

Jetzt funktioniert es bis auf NN. Da beginnt der Text jetzt plötzlich ganz oben, aber das werde ich mir schon mit irgendeinem Hack zusammenfingern.

Kommentier mal die float:left-Deklaration für das DIV #kopf aus:

#kopf{
        width:732px;
        height:160px;
        background-image:url(kopf.jpg);
        /*float:left;*/
}

Und noch ein Tipp zur empfohlenen "clearfix"-Methode:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}

schliesst die Lücke zwischen dem DIV #container und dem unteren Fensterrand.

 

[Spelmann]

Wow. Jetzt siehts wirklich lecker aus.
Leider verstehe ich noch nicht was bei .clearfix:after passiert, aber jetzt habe ich ja zumindest für einen 2-Spalter schon mal eine gute Vorlage.
Ich bin ganz schön hin und her gerissen. Mit Tabellen ist so etwas ja schnell gemacht, dennoch habe ich schon Lust das anständig zu lernen. CSS ist noch ganz schön hakelig finde ich. Mit so kompetenter Hilfe bin ich aber ermutigt dran zu bleiben. ;-)

 

[Maik]

Hi,

Leider verstehe ich noch nicht was bei .clearfix:after passiert

das wird doch auf http://positioniseverything.net/easyclearing.html im Absatz "Using :after" erläutert

Anstelle eines inhaltsleeren DIV-Elements mit der clear-Eigenschaft, wird mit Hilfe des Pseudoelements :after und der content-Eigenschaft ein automatischer Inhalt nach dem Element eingefügt (in diesem Fall ein Punkt), der mit clear:both die Floatumgebung aufhebt, um so im Dokument wieder den normalen Textfluss herzustellen.

Mit den Angaben height:0 und visibility:hidden wird der generierte Inhalt im Dokument versteckt.