[CSS] Problem mit Padding

[dan1elx3]

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:

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

MfG

[Kentika]

Du musst einen der beiden Containern eine kleinere Breite geben

Ungetestet

[devcode]

Oder gibst dem #head ein float: left;

[Mikesch01]

Oder du bereingst float wieder.

HTML

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

CSS zusätzlich

.clear {
    clear: both;
}