Question

I have a wrapper div (#main-wrapper), and a div centered horizontally inside (#image). It contains a big image.

I’d like to have a div overlaying #image in the bottom-right corner (#thumbs).

Here’s what I have:

<div id="main-wrapper">
    <div id="image">
        <img src="img.jpg" />
    </div>
    <div id="thumbs">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
   </div>
</div>

div#main-wrapper
{
    width: 100%;
    background-color: #000000;
    position: relative;
}

div#main-wrapper div#image
{
    margin: 0 auto;
    width: 800px;
    height: 600px;
    background-color: #1D9DDD;
}

div#main-wrapper div#thumbs
{
    position: absolute;
    width: 600px;
    height: 400px;
    background-color: #FF212C;
    bottom: 0;
    right: 0;
}

The problem is that #thumbs goes to the bottom-right of #main-wrapper, and not the center of the centered div.

You can see what I’m doing here: http://jsfiddle.net/22NnS/1/

Answer 1

If I’m understanding correctly then this will work. Put the thumbs div within the image container like so:

<div id="main-wrapper">
    <div id="image">
        <img src="img.jpg" />
        <div id="thumbs">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>

</div>

And then change where the position:relative is defined:

div#main-wrapper
{
    width: 100%;
    background-color: #000000;
}

div#main-wrapper div#image
{
    margin: 0 auto;
    width: 800px;
    height: 600px;
    background-color: #1D9DDD;
    position: relative;
}

div#main-wrapper div#thumbs
{
    position: absolute;
    width: 600px;
    height: 400px;
    background-color: #FF212C;
    bottom: 0;
    right: 0;
}