How to overlay one div over another div

Question

Hi,

Hoping someone can assist but I need assistance with overlaying one individual div over another individual div, i.e. my code looks like this:

<div class="navi"></div>
<div id="infoi"><img src="info_icon2.png" height="20" width="32"/></div>

Unfortunately I cannot nest the infoi div or img inside the first div (class navi) - it has to be two separate divs as shown but I need to know how I could place the img div over the first div (navi) and to the right most side and centered on top of the navi div.

Would appreciate any help is achieving this (hopefully it's possible)

Thanks.

Answer 1

HTML

<div id="container">
<div class="navi"></div>
<div id="infoi"><img src="info_icon2.png" height="20" width="32"/></div>

</div>

CSS

#container {
    width: 100px;
    height: 100px;
    position: relative;
}

#navi, 
#infoi {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#infoi {
    z-index: 10;
}

I would suggest learning about position: relative and child elements with position: absolute.

Answer 2

give your second div a relative position and then set its left and top properties

position:relative; left:xx; top:xx;

arrange left and top accordingly

Answer 3

i am not that much of a coder and not an expert in CSS but still i am using your idea in my web designs...i have tried different resolutions too...

#wrapper { 
 margin: 0 auto;
 width:901px;
 height:100%;
 background-color:#f7f7f7;
 background-image:url(images/wrapperback.gif);
 color: #000;
}
#header{
   float: left;
   width: 100.00%;
   height: 122px;
   background-color: #00314e;
   background-image:url(images/header.jpg);
   color: #fff;
}
#menu {
    float:left;
    padding-top:20px;
    margin-left:495px;
    width:390px;
    color:#f1f1f1;
    }

and the html is

<div id="wrapper">
    <div id="header">
          <div id="menu">
           menu will go here       
          </div>
    </div>
</div>

and ofcourse there will be a wrapper around both of them....You can control the location of menu div which will be displayed within header div with left margins and top positions...you can also set the div menu to float right if you like hope this can help you