Align absolutely positioned div within - html

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">
Link 1
Link 2
Link 3
</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">
Link 1
Link 2
Link 3
</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;
}