Making two divs float over the corners of another

Question

Here is what I'd need. I'll have a main div in which most of my content is going to be contained. I don't know how much content will there be, so I can't make any assumption on the height (let's say, in px) of the main div. What I would need to do is making two divs (of a certain, fixed size) stand right over the top left corner of the main div (with a z-index greater than the main div's, of course) and over the bottom right corner of the same div. I really have no idea how to achieve this: can anybody tell me how to do it??

Thank you very much!

Matteo

Answer 1

All you need to do is set the main div position to relative and place your two "corner" overlays absolute, one top and left 0, the other one bottom and right 0. In case you have to overlap the corner, you'll have to work with negative values (e.g. top:-5px; left:-5px;).

/* The required CSS rules */
#container {
  position:relative;
}

.tl,.br {
  position:absolute;
}

.tl {
  left:0;
  top:0;
}

.br {
  right:0;
  bottom:0;
}

And here the HTML Code:

<div id="container">
  <div class="tl"></div>
  <div class="br"></div>
</div>

Have a look here.