Place a div over another div without position: absolute or relative and variable height and width

Vote count: 0

I am making an application that uses a website as an interface.
The html look like the following:

<div id="main">
  <div id="page-1"></div>
  <div id="page-2"></div>
  <div id="page-3"></div>
</div>

Each page contains data the same way as you would navigate to http://ift.tt/XBA2Ab, http://ift.tt/1yKMPb3 or http://ift.tt/1yKMPb5.

However I want to stay at www.example.com and navigate trough pages by fading them in and out. I got them placed over one another with position: absolute;top:0;left:0; but this way main won't know the height of the page since it's content is absolute.

Therefore i'd like a way to make them fade in and out wiouth the use of position or negative margins (since the height of each page is dynamic due to content)

Or maybe you have another way of achieving this effect?

This is for an application, not a webpage that should be indexed by google or something else. So no SEO worries :)

asked 3 mins ago

Dex
35

Place a div over another div without position: absolute or relative and variable height and width