falsche Anzeige auch bei validem XHTML 1.1

[wumble]

Hallo, ich habe mal wieder ein Problem mit der Darstellung.
Wollt mich nun mal an meiner ersten etwas größeren XHTML Seite versuchen und habe dazu erstmal eine Art Skizze erstellt und die versucht umzusetzen, ich wollte diesmal nicht mit Tabellen sondern mit Divs arbeiten. Aber leider wird die Seite im Firefox nicht richtig angezeigt.
das ist mein erster Versuch eine vernünftige Seite zu basteln mit validem XHTML Code, zentralen CSS Anweisungen und ohne Tabellen zu gestalten. Ich hoffe ich hab da nun nicht ganz grobe Schnitzer drin, dachte eigentlich ich hätte mittlerweile die ganze Materie einigermassen verstanden, aber hier komm ich einfach nicht mehr weiter.
Hier mal ein Screenshot, oben IE unten Firefox: >>klick<<
Hier der Link zur Seite: >>klick<<

So und hier der Code von den Boxen:

<!--PAGE ANFANG-->
<div id="page">
<div id="header">header</div>
<div id="navi">navi</div>
<!--CONTENT ANFANG-->
<div id="content_left">content_left</div>
<div id="content_center">
<div id="last_left">last_left</div>
<div id="last_right">last_right</div>
<div id="content_main">content_main</div>
</div>
<div id="content_right">content_right</div>
<!--CONTENT ENDE-->
<div id="bottom">bottom</div>
</div>
<!--PAGE ENDE-->

Und die CSS Datei sieht so aus:

     #page {
    margin:auto;
    width: 871px;
    height: auto;
    background-color:#808080;
    }
    #header {
    width: 871px;
    height: 150px;
    background-color:#BC450A;
    }
    #navi {
    width: 871px;
    height: 29px;
    background-color:#350C78;
    }
    #content_left {
    width: 220px;
    height: auto;
    float: left;
    background-color:#F99100;
    }
    #content_center {
    width: 431px;
    height: auto;
    float: left;
    }
    #content_main {
    width: 431px;
    height: auto;
    float: right;
    background-color:#F9F900;
    }
    #content_right {
    width: 220px;
    height: auto;
    float: right;
    background-color:#F99100;
    }
    #last_left {
    width: 200px;
    height: auto;
    float: left;
    background-color:#98CE04;
    }
    #last_right {
    width: 200px;
    height: auto;
    float: right;
    background-color:#045FCE;
    }
    #leer {
    width:871px;
    height: auto;
    float: right;
    }
    #bottom {
    width: 871px;
    height: 50px;
    background-color:#297506;
    }

 

[planet4]

Aber leider wird die Seite im Firefox nicht richtig angezeigt.

... das ist ein Trugschluss

also: deine ersten 3 Boxen haben kein "float:irgendwas", das heißt, sie werden alls nacheinander angezeigt.
die folgenden Boxen haben alle ein "float", das heißt, sie sind aus dem normalen Fluss der Elemente herausgenommen -

wenn jetzt ein Container folgt, der wieder kein float hat (wie es bei dir der Fall ist), wird er logischerweise hinter den
letzten "normalen", nicht gefloateten Container angeordnet.

so macht es Firefox, so macht es auch Opera, das erkennt man
an dem grünen Hintergrund zwischen last_left und last_right
warum IE das hier wieder nicht richtig macht, kann ich dir jetzt leider nicht sagen

planet4.

 

[dkdenz]

Probiere mal das aus:

#bottom {
    width: 871px;
    height: 50px;
    background-color:#297506;
    [B]clear:both;[/B]
}

 

[wumble]

wunderbar hat funktioniert
vielen Dank für die Hilfe, es ist auch gut zu wissen das der Firefox mal wieder alles richtig gemacht hat

 

[dkdenz]

Gern geschehen...
...und wenn im IE was richtig aussieht, ist es bestimmt falsch.

 

[wumble]

Nun hab ich schon wieder ein Problem
Und zwar sollen der linke und rechte Bereich (content_left und content_right) bis nach unten gehen, also sich der Höhe des mittleren Bereichs anpassen. Eine Lösung wäre dem body eine feste Grösse zu geben und die höhe von dem linken und rechten Content auf 100% zu setzen, aber gibt es auch noch eine Möglichkeit, das alle Höhenangaben dynamisch bleiben und sich die Höhe dennoch anpasst?

 

[dkdenz]

Das wird schwierig.
Aber lies Dir mal das durch, da ist eine mögliche Lösung (Fake) gefunden worden.
http://forum.jswelt.de/showthread.php?t=26993

 

[wumble]

nochmals Danke, na dann werd ich mal schauen ob ich nun mit der Hintergrundsache arbeite oder doch wieder mit einer Tabelle als Grundstruktur.

 

[dkdenz]

Ein Blick hierhin könnte sich auch lohnen:
http://intensivstation.ch/files/templates/2/template-3.html

 

[wumble]

Dies ist ja mal eine sehr elegante Lösung, aber leider für meine Zwecke auch nicht sehr hilfreich, weil ich später auch Grafiken als Hintegrund einsetzen möchte. Hab das ganze nun doch mit einer Tabelle gelöst, ist auch so ziemlich übersichtlicher Code und erfüllt alle Anforderungen die ich hab.
Hier mal der Code wie das nun gelöst ist:

<!--PAGE ANFANG-->
<div id="page">
<div id="header">header</div>
<div id="navi">navi</div>
<!--CONTENT ANFANG-->
<table id="table" cellpadding="0" cellspacing="0">
<tr><td id="content_left" rowspan="2">content_left</td>
<td id="last_left">last_left</td>
<td id="last_right">last_right</td>
<td id="content_right" rowspan="2">content_right</td></tr>
<tr><td id="content_main" colspan="2">content_main</td></tr>
</table>
<!--CONTENT ENDE-->
<div id="bottom">bottom</div>
</div>
<!--PAGE ENDE-->

edit: irgendwas stimmt mit euerer HTML Code Anzeige nicht, der Code oben ist auf einmal auch in einer Reihe, vermute mal der Befehl nl2br fehlt.