div mit margin erzeugt unerwünschten Abstand zwischen div's in einem div

Hi!

Bitte gucken:

So soll es aussehen: http://www.bilder-hochladen.net/files/bq9q-d-jpg.html (Firefox)

So soll es nicht aussehen: http://www.bilder-hochladen.net/files/bq9q-c-jpg.html (IE, Opera, Chrome)

Das sind alles div's. Header, dann eine Area mit Menü, Content und einem Spacer, und der Footer.

Die div's in der Area haben margin's, und das ist kein Problem. Füge ich aber ein div (hier mit dem Text 'test') im content-div mit einem margin ein, wird außer im Firefox dieser Abstand zwischen content und spacer angezeigt...

Wie verhindere ich das? Sonst könnte ich für Elemente im content ja nur padding verwenden, manchmal braucht man aber margin und padding...

Wieder sind die Browser unterschiedlich in der Anzeige... der Mensch wird es nie lernen

Danke jedenfalls...
MfG

<div id = "header"></div>

<div id = "contentArea">

<div id = "menu">menu</div>

<div id = "content">

content

<div id = "test">test</div> <!-- Problem, sobald eingefügt, kommt Abstand zwischen content und spacer -->

</div> <!-- end content -->

<div id = "spacer"></div>

</div> <!-- end contentArea -->

<div id = "footer"></div>

Lupo4u2

Was steht denn in dem Stylesheet für test und spacer?
Hast du dem spacer auch ein margin/padding verpasst?

PRIEST

Ohne CSS kann man dir jetzt nicht so leicht helfen

Achso, sorry, ich dachte, das Problem wäre bekannt, bin ein Anfänger.

body
{
	margin: 0 0 20px;
}

#header
{
	width: 900px;
	height: 140px;
	margin: 0 auto;
	background-color: #222222;
}

#contentArea
{
	width: 900px;
	margin: 0 auto;
	background-color: #444444;
}

#contentArea #menu
{
	width: 830px;
	height: 40px;
	margin: 0 auto;
	padding: 0 10px;
	text-align: center;
	background-color: #666666
}

#contentArea #content
{
	width: 830px;
	min-height: 600px;
	margin: 20px auto 0;
	padding: 10px 10px 0;
	background-color: #888888;
}

#contentArea #spacer
{
	width: 850px;
	height: 20px;
	margin: 0 auto;
	background-color: #AAAAAA;
}

#contentArea #test
{
	margin: 20px 0;
}

#footer
{
	width: 900px;
	height: 50px;
	margin: 0 auto;
	background-color: #333333;
}

Oh, der Firefox macht diesen Abstand auch, aber erst, sobald der content seine min-height übersteigt...

Ich würd gern wissen, warum das überhaupt so ist. Ein div mit margin sollte dem "Eltern-div" doch kein margin hinzufügen?

Ok hab wohl eine Lösung.
Als letztes Element in content ein "stretch-div" mit height: 1px. Schon gibt es keinen Abstand mehr, in keinem Browser, und egal ob min-height: erreicht/überstiegen wurde oder nicht.