Hintergrund läuft über gefloatete Elemente im Inhalt

[joke24]

Hallo Leute.

Ich bin geradem am Erstellen eines neuen Designs für meine Webseite aber bin am verzweifeln.

Der äussere Rahmen läuft nicht mit meinem Inhalt mit, also passt sich nicht der Größe an.

Bildschirmfoto 2010-04-18 um 22.14.10.png (39.96 KiB) 212-mal betrachtet

Mein CSS-Code:
http://pastebin.com/GjgsCMi4

Meine HTML-Datei:
http://pastebin.com/fEQf2qUh

An was liegt es und wie kann ich das korrigieren?

Findet der Spruch wer Floatet muss auch Clearen hier Anwendung? Und falls, wie? Ich hab das auch nach dem Durchlesen mehrerer Seite nicht ganz verstanden.

Danke für eure Hilfe

[joke24]

Sorry, ich hab einen kompletten Kauderwelsch als Titel geschrieben.
Ich wollte eigentlich sagen: Hintergrund passt sich nicht der Größe des Inhalts an

[sejuma]

Ja, das hängt mit fehlendem Clearen zusammen.
Zudem solltest du deine Seite vereinfachen. Da sind zu viele überflüssige Divs drin.

So ist z.B. dein Außendiv vollkommen überflüssig. Dessen Angaben kannst du direkt der #page zuweisen:

Code: Alles auswählen

#page {
        margin: auto;
        min-width: 1000px;
        width: 80%;
        overflow: auto;
        border-color: #a50084;
        border-style: solid;
        border-width: 2px;
}

Wenn du den Außendiv dann rausgeschmissen hast (auch den schließenden Tag dazu), dann cleare vor dem Schließen von page:

</div> <!-- Inhalt E -->
<div style="clear: both;"><!--Clear-Div--></div>
</div><!-- Page E -->

Ferner:
Wenn du einen #left hast, dann brauchst du nicht zusätzlich noch einen #left_content. Gleiches gilt für #right und #header/headtext.

[joke24]

Und schon klappts, hab vielen Dank!