Question

I’ve a Div (id=placeholder), which sits in a table cell, the one has three nested div’s (content1, content2 and content3). I want these nested divs to have the same size as their parent (id=placeholder) and overlay each other.

What is the simplest way to achieve that? I’m looking for a cross-browser solution.

Html

<table><tr><td>

<div id='placeholder'>
  <div id='content1' class='overlay'>...</div>
  <div id='content2' class='overlay'>...</div>
  <div id='content3' class='overlay'>...</div>
<div>

</td></tr></table>

Answer 1

css

.overlay { position: absolute; }

html

<div id='placeholder'>
  <div id='content1' class='overlay'>...</div>
  <div id='content2' class='overlay'>...</div>
  <div id='content3' class='overlay'>...</div>
<div>

And you will need to clearfix inside the cell to stretch table cell by the height.

Code: http://jsfiddle.net/v6Jnr/

Upd: Added cross-browser clearfix

Code: http://jsfiddle.net/v6Jnr/2/