html - divs position to relative.

Question

Hi guys, I have a question: There are 3 divs. 2 of them should have their background-images and their position is to the 2 sides of user-area. (one to the right, and one to the left). The 3rd div should be over them and full-width. How can I do this with css?

Answer 1

Make either those two divs or the third div positioned absolutely. Assign a z-index to the third div higher than for those other two.

(Well, as far as the talk about CSS can go without example)

---

<style>
  div.holder-for-left-and-right
  {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  div.left
  {
    float: left;
    width: 100px;
    height: 50px;
    background: url(...) no-repeat;
    z-index: 1;
  }

  div.right
  {
    float: right;
    width: 100px;
    height: 50px;
    background: url(...) no-repeat;
    z-index: 1;
  }

  div.on-top-of-them
  {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    z-index: 2;
  }
  </style>

<div class="holder-for-left-and-right">
  <div class="left">I am leftM</div>

  <div class="right">I am right</div>

  <div class="on-top-of-them">I am over them</div>
</div>