Show a Div just below another Div with cross browser compatibility

I have two Div sections as below:


<body>
<Form>
  <div id="divMain" style="top:40px">

  </div>

  <div id="divFooter" style="top:550px">

  </div>
</Form>
</body>

If I use- position:absolute for both Divs, they render well on IE, but on firefox, the footer Div renders on the base-line of the Main div.

Even if I use Top, the pixel difference between two browsers disturbs rendering.

Is there any way to render the Divs same in both browsers?

That’s default behaviour for a div, so you don’t need any styling at all, unless you have specified all divs to have margins elsewhere.

I want to display both Divs just one below the other. I have given the code, what else example you want?

Hi for a starter is it not a good idea to use inline styles. Can you give an example of what you would like to reach? I would never use an absolute divs there are different ways to have those div’s line up correctly.