Question

i have div area which is devided in to 4 equal parts, like the one atached.

now i need another div to be placed at the bottom area as an overlay to the above div. Imagine it like a text scroll area on the bottom side of the TV and the TV screen is constructed by 4 divs.

I am able to create the 5 divs. now the issue is that the 5th div(scroll area) is not going above the bottom edge of the 2 lower divs (3 and 4). I also had put z-index also but failed

can anybody share a sample for styling this.

Answer 1

You can solve it this way:

HTML:

<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>

<div class="overlay"></div>​

CSS:

.area{
  float: left;
  width: 49%;    
  height: 300px;
  border: 1px solid black;
}

.overlay{
    width: 200px;
    height: 100px;
    background-color: blue;
    clear: both;
    position: absolute;
    bottom: 30px;
    margin: -100px;
    left: 50%;
}
​

Please note that I have used hard coded example values. The actual values depends on which context the markup is in.