css/html: vertical div-alignment-Problem (added live-demo)

Question

Hi!

I have a problem with aligning some divs in this case:

<div id="preamble" style="margin-bottom: 100px;">Preamble</div>
<div id="container" style="position: relative;">
    <div id="content" style="position: relative; margin-top: 50px;">
        Content
    </div>
</div>

(Of course this is only an example that reproduces the behaviour I want to avoid.)

I would have expected the content-div to align from the container-div. Therefore there should be 150px alltogether between "Preamble" and "Content".

However, (at least in Firefox) this is not the case. The container-div is simply ignored and therefore the content-div's margin-top is ignored too, as long as it is not bigger than the margin-top of the preamble-div's margin-bottom.

What can I do? Is there an additional css-rule I would have to apply? I would like to keep position: relative aswell as the html-structure.

Thank you!

[edit2]

Hope you are still with me ;-)

Sorry for the delay... here's a live-demo. It's so live, I even did a small jquery-script to illustrate the problem - just try out the buttons. Live Demo

Thank you!

[edit]

The way it is:

The way I want it (without the borders)

I hope the difference is obvious although the images are jerky ;-)

Answer 1

<div id="preamble" style="margin-bottom: 100px;">Preamble</div> 
<div id="container" style="position: relative;"> 
    <div id="content" style="position: relative; margin-top: 50px;"> 
        Content 
    </div> 
</div> 

First of all, i recon making a stylesheet. It will save you time when you have alot of elements and also will keep your code cleaner.

What i see when i test your code is that the content div is showing inside of the Container with a margin on the top of 50px. What's wrong?

I think what you want to achiev is this:

<div id="preamble" style="margin-bottom: 100px; border: solid black 1px;">Preamble
 <div id="container" style="position: relative; border: solid black 1px;"> 
  <div id="content" style="position: relative; margin-top: 50px; border: solid black 1px;"> 
   Content 
  </div> 
 </div> 
</div>

Good luck! You didn't nest the Div inside the other one and therefore it wouldn't be a total of 150px together ;). Remember Margin is Outside the cell and padding inside the cell!

When i read now that you want to keep your html structure the same, that's not possible. As soon as you give your first div a margin of 100px this means the next element will be placed 100px under that element. And because you a nested div next with a margin on the top of 50px this means you create more then 150px of total space...

Why did you wanna maintain your html structure?

Answer 2

That's because overlapping vertical margins are collapsed.

The CSS2 specification says:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

In your case, because #preamble's margin-bottom and #container's margin-top overlaps, they get collapsed, so the effective margin is the bigger one (in this case, 100px).

If background color is not an issue, you can use padding instead of margin.

Answer 3

I found a way out of this miracle: the good old overflow: hidden; trick...

When you add the property overflow: hidden; to #container, the behaviour is just like expected.

You can proove the difference here

Still I'm not completely convinced. Why does this trick solve my problem and are there other ways to do it?

Thanks for your help anyway!