Benötige mal wenig Hilfe mit CSS

N

nilsmoeller

Hallo, ich versuche ein 2-spaltiges CSS-Layout zu gestalten, mit einer Kopf- und einer Fuss-Note. Hier ein kurzer Überblick über die Struktur:

- KOPF
- RAHMEN ANFANG
----- LINKS
----- RECHTS
- RAHMEN ENDE
- FUSS

Das gelingt mir aber nur zum Teil.
Die einzelnen Container sind richtig ausgerichtet, das heist: oben der Kopf darunter die linke und rechte Spalte und darunter der Fuss, aber mit dem Rahmen habe ich Probleme. Er will sich einfach nicht optisch um die Spalten herumlegen.

Ich möchte gerne, dass der Rahmen als Behälter für ein gemeinsames Hintergrundbild für die linke und rechte Spalte funktioniert.

Ich könnte mir vorstellen, dass ich hier etwas mit "float" nicht richtig mache, aber ich habe bereits soviel probiert, dass ich vor lauter Bäumen den Wald nicht mehr sehe.

Wäre sehr nett, wenn mir hier jemand aushelfen könnte.

Hier die einzelnen Formatierungen (so, wie ich sie bereits geschrieben habe):

body {
margin: 0 0 20px 0;
color: #f00;
background: black;
font-size: 12px;
font-family: "lucida grande", geneva, arial, verdana, sans-serif;
text-align: center;
}

#KOPF {
width: 900px;
height: 110px;
margin: 0 auto;
padding: 0;
color: #f00;
background: #GREEN;
border-bottom: 15px solid white;
}

#RAHMEN {
width: 900px;
height: 100%;
margin: 0 auto;
padding: 0;
color: #f00;
background: WHITE;
border: 1px solid red;
}

#LINKS {
float: left;
width: 600px;
height: 100%;
margin: 0;
padding: 0 15px;
text-align: left;
background: BLUE;
}

#RECHTS {
float: left;
width: 210px;
height: 100%;
margin: 0;
padding: 0 15px;
text-align: left;
background: RED;
}

#FUSS {
clear: both;
width: 900px;
height: 32px;
font-size: .75em;
margin: 0 auto;
padding: 0;
color: #f00;
background: GREEN;
border-top: 15px solid white;
}
 
Prinzipiell sollte es so gehen:

HTML: 
<div id="RAHMEN">
   <div id="LINKS">....Inhalt hier...</div>
   <div id="RECHTS">....Inhalt hier...</div>
</div>

2nd
 
Also, außer das
HTML: 
background: #GREEN;
keine gültige Farbangabe ist und groß geschrieben IDs und Farbnamen auf mich eher ungewohnt wirken (was sagt eigentlich der Validator dazu), kann ich da jetzt nichts erkennen, was nicht stimmt (könnte aber auch an der Uhrzeit liegen ;)

Wie sieht denn dein Markup dazu aus? Mein Test-Markup macht was es soll (validiert nur nicht):
HTML: 
<link rel="stylesheet" href="css.css">
<body>
	<div id="kopf"></div>
	<div id="rahmen">
		<div id="links"></div>
		<div id="rechts"></div>
	</div>
	<div id="fuss"></div>
</body>

However, zwei Links, die möglicherweise weiterhelfen:
http://www.yaml.de/
Einschließen von Floats ohne zusätzliches Markup
 
Wenn der Rahmen sich gar nicht erweitert, sondern nur ganz oben komplett zusammengeklappt hängt, liegt's daran, dass Du keinen clear gemacht hast. Versuch mal unterhalb der floats aber noch im Rahmen ein <div style="clear:both;"></div>

Wenn's dann geht, hast Du Dein Problem.
 
Gib Rechts mal float:right
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten