css margin problem

[Telos]

hi, I have a small problem with css margins. I have the following html document (simplified for testing purposes)

        <h1 id="contop">start</h1>
	<div class="conbg">
		<div class="conbg2">
			<h1>topic</h1>
			<div class="tiny">24.3.2006</div>
			<p>test text...</p>
		</div>
	</div>
	<h1 id="conbottom">end</h1>

css is the following:

h1#contop {
	background-image: url('images/contop.jpg');
	background-repeat: no-repeat;
	width: 525px;
	height: 39px;
	text-indent: -9999px;
	margin: 0px;
}

h1#conbottom {
	background-image: url('images/conbottom.jpg');
	background-repeat: no-repeat;
	width: 525px;
	height: 79px;
	text-indent: -9999px;
	margin: 0px;
}

div.conbg {
	background-image: url('images/conbg.jpg');
	background-repeat: repeat-y;
}

div.conbg2 {
	background-image: url('images/conbg2.jpg');
	background-repeat: no-repeat;
	padding: 0px 40px 0px 40px;
	margin: 0px;
}

And as you can see. If I use margin inside the .conbg2 element it will place the margin between the conbg2 and conbg elements. What am I missing here. I could forget margins and use just paddings but I would like to solve this before I will go there. Any ideas?

[GoldNetX]

I am not sure , but I believe the margin is applied to the parent object, and since you have conbg2 nested inside of conbg the margin should occur between the edge of conbg2 and conbg.

I would highly recommend though that you set the 'position:' attribute for each css chunk. It will help by declaring to what orginal object your left, top, and I believe margins are supposed to be based upon.

[Dumb Genius]

It's totally normal.
Look at this W3C image showing how a block element is made:

[Telos]

I still don't get it why it acts like that. Element 1 inside element 2 which is inside element 3. The way I understand it the element 1 margin should go between elements 1 and 2. not between elements 2 and 3. But I "fixed" the problem by placing just something before and after page content though I don't feel happy about my "solution".

But basicly I would like to hear real solution to the "problem" instead of explanations of the problem itself.

[Dumb Genius]

I think it behaves badly because you didnt set a width in px for div.conbg and div.conbg2.