✔ Kleines Problem mit CSS

[FossilD]

Heho,
ich versuche gerade einen Freund ein Template für seine neue Seite zu erstellen.
Diesmal wollte ich es mit div anstatt table probieren.
Nur hatte ich bisher wenig Erfahrung damit, deswegen probierte ich mal so rum

Später habe ich es dann sogar geschafft, das Grundgerüst des Templates zusammenzusetzen,
Leider habe ich die ganze Zeit mit der Vorschau meines HTML Editors gearbeitet, der stanardmäßig auf InternetExplorer eingestellt ist.
Nachdem ich es mit Firefox betrachtet habe, war ich scho wieder der Verzweiflung nahe, denn da ist mal wieder einiges verrutscht hat.

Da kann man es sich mal anschauen:
http://funnyfu.fu.funpic.de/

body {
background: #000000;
color: #ffffff;
font-family: verdana, tahoma, arial;
font-size: 10px;
margin: 0px;
padding: 0px;
text-align: center;
}


#website {
margin: 0px auto;
text-align: left;
width: 800px;
}

#header {
clear: both;
height: 191px;
width: 800px;
}

#menu {
clear: both;
height: 37px;
width: 800px;
}

#content {
background-image: url(images/mitte.gif);
background-repeat: repeat;
clear: both;
width: 800px;
}

#links {
float: left;
width: 572px;
}

#rechts {
width: 228px;
}

#rechtsfeuer {
width: 228px;
height: 112px;
}

#rechtsmenu {
width: 228px;
text-align: center;
}

#unten {
width: 800px;
height: 30px;
}

#untenmitte {
width: 800px;
background-image: url(images/untenmitte.gif);
background-repeat: repeat;
text-align: center;
}

#ganzunten {
width: 800px;
height: 30px;
}

Wie schon gesagt, ich hab mich bisher noch nie wirklich mit CSS beschäftigt.
Es wird wahrscheinlich irgendwie ein kleiner Fehler sein, der mir einfach net auffallen will.

 

[Maik]

Hi,

setz mal diese Regeln im Stylesheet ein:

#header {
        height: 191px;
        width: 800px;
}

#menu {
        height: 37px;
        width: 800px;
}

#links {
        float: left;
        width: 572px;
        margin-right: 0 !important;
        margin-right: -3px;
}

#rechts {
        margin-left: 572px !important;
        margin-left: 569px;
}

#rechtsfeuer {
        height: 112px;
}

#rechtsmenu {
        text-align: center;
}

img {
        display: block;
}

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

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Und ruf im DIV #content die Klasse .clearfix auf:

<div id="content" class="clearfix"> ... </div>

 

[FossilD]

Wow, vielen Dank für die große Hilfe
Ich werd wohl erst noch paar Monate Erfahrungen in CSS sammeln, damit ich überhaupt verstehe, was du da gemacht hast.
Aber dank dir funktioniert alles!