I need a div to sit in the corner of a another div, OVER another div

HTML

<body onload="MM_preloadImages('images/enterroll.gif')">
<div id="wrapper">
<div id="enterlogo"><img src="images/entrylogo.gif" width="600" height="600" alt="enterlogo" /></div>
<div id="enter"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('enter','','images/enterroll.gif',1)"><img src="images/enter.gif" alt="enter" name="enter" width="300" height="300" border="0" id="enter2" /></a></div>
</div>
</body>

CSS

body {
    background-color: #CCC;
}
#wrapper {
    height: 750px;
    width: 750px;
}
#enterlogo {
    height: 600px;
    width: 600px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
}
#enter {
    height: 300px;
    width: 300px;
}

So what I actually need this all to do is have the enter div sit in the bottom right hand corner of the wrapper div.

For this to happen I need it to overlay the enterlogo div! I've looked up many posts on z-index and positioning methods with float right, but all of them seem to fall short.

Any help at all would be appreciated, I called a friend and he said that making the image in the enterlogo div a background and putting the other image in that div could help.. I can't see how it'll work though!

P.S the rollover image is going to be a link, that is going to eb the only div piece on the page.

Answers


Use position: absolute, like this:

#wrapper {
    position: relative;
}
#enter {
    position: absolute;
    right: 0;
    bottom: 0;
}

Here's a demo: http://jsfiddle.net/thirtydot/Nd2jQ/

Here's some more information about how this works: http://css-tricks.com/absolute-positioning-inside-relative-positioning/


I believe you are overusing javascript.. You should just use CSS for all your requirements (and in the process simplify your html)..

<body>
    <div id="wrapper">
        <div id="enterlogo"></div>
        <a href="#" id="enter"></a>
    </div>
</body>

and

body {
    background-color: #CCC;
}
#wrapper {
    height: 750px;
    width: 750px;
    position:relative;
}
#enterlogo {
    height: 600px;
    width: 600px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    background: url('images/entrylogo.gif') top left no-repeat;
}
#enter {
    display:block;
    height: 300px;
    width: 300px;
    background: url('images/enter.gif') top left no-repeat;
    position:absolute;
    bottom:0;
    right:0;
}
#enter:hover {
    background-image: url('images/enterroll.gif');
}

demo at http://jsfiddle.net/gaby/WL96s/


Need Your Help

Spring Tomcat issue

java spring tomcat

I've Spring 3.1.1.jar and Tomcat 6.0. When i try to run my simple one bean app (which just has a hello world stmt) i get the following exception.

Correct way to model a collection of items in Firebase

javascript angularjs firebase angularfire

In the docs I see a lot of examples using index values as a part of the key name for a particular item --- but I don't understand how this is a consistent way to model your data.