[CSS] Problem mit Padding

[exception]

Hallo!
Traurigerweise scheitere ich gerade bei den Grundlagen von CSS. lol^^

Folgender Quelltext:

<div id="head">
	<div id="headContainer">
		<div id="headLeft">x</div>
		<div id="headRight">y</div>
	</div>
</div>

#head {
	display: block;
	width: 100%;
	margin: 0px auto;
	padding: 10px 0 10px 0;
	background: #0D0D0D;
	border-bottom: 1px solid #0A0A0A;
}

#headContainer {
	display: block;
	width: 800px;
	margin: 0 auto;
	font-family: Tahoma;
	font-size: 17px;
	color: #FFF;
	background: red;
}

#headLeft {
	width: 250px;
	float: left;
	background: green;
}

#headRight {
	width: 550px;
	float: left;
	background: orange;
}

#headContainer sollte sich in #head befinden und ein padding von 10px haben(top, bottom).
Stattdessen wird #headContainer etwas unterhalb von #head angezeigt. Warum?

Preview: Title

Wenn ich allerdings #headLeft und #headRight aus #headContainer entferne, funktioniert es
genau so wie ich will, nur das es halt ein einzelner Container ist.

Siehe http://nethox.bplaced.net/cur2

MfG


Edit:
Ich will keine fixen height-Werte benutzen, sonst wäre das ganze ja kein Problem.

[Devon]

Füg #head noch folgenden Wert hinzu:

height: 20px;

Dann funktioniert es ohne #headLeft und #headRight zu entfernen. Hab ich eben getestet bzw. ausprobiert mit Firebug. So wie du es wolltest, oder?

[exception]

Jap, so sollte es dann aussehen. Die Sache ist nur die, das ich keine Fix-Werte verwenden will.
Wenn ich jetzt zB. die Schriftgröße in #headLeft größer mache, würde es erst wieder nicht
passen weil der Abstand nach unten sich verkleinert.

[Bubble Gum]

Stattdessen wird #headContainer etwas unterhalb von #head angezeigt. Warum?

Wenn man Floatet, sollte man dieses auch danach wieder zurücksetzen.

<div style="float:left;">Links<div>
<div style="float:right;">Rechts<div>
<div style="clear:both;"><div>