align a div in a footer to the other div - html

Question

I'm stuck with this its the problem
<div id="example1">
<div id="example2"> </div>
<div id="example3"> </div>
</div>
I need to align the div with id example3 under example 2 and if it's possible just in the footer and center of the div with id example1. how can i do it?? i have days trying and more close it's like this.
CSS
#example3{
margin-left:auto;
margin-right:auto;
margin:0;
height:80px;
position:absolute;
top:170px;
}
#example2{
height:153px;
width:305px;
float:left;
background:url(Logo.png);
}
thanks for your help

Answer 1

For one thing, position:absolute won't let you set margins.
For another, you've got
margin:0;
which is resetting your auto on the left+right. Try
margin:0 auto;
Here's a JSFiddle which accomplishes what you're trying to do (more or less).
EDIT
OK, but now you've now introduced a third problem, in the float:left, which will override the auto margin and always float left.
Also, the problems I mentioned above haven't been addressed. To summarize: no floats, no absolute positions, and try not to override the margin by styling it twice.
Are you trying to have a 17px space between #example2 and #example3? Here's an updated link, evolved from the last one, that does this new behavior: JSFiddle

Answer 2

Going by the CSS you have I think you need to swap the div that's absolutely positioned to the "logo" (#example2), then you can just margin the top of example 3 to get the top 170px spacing
Example : jsfiddle
try:
#example1{
background: #eee;
height: 250px;
position: relative;
overflow: auto;
}
#example2 {
background: #444;
color: #fff;
position: absolute;
top: 0;
left: 0;
height:152px;
width:305px;
}
#example3 {
background: #007;
color: #fff;
width: 300px; /* adjust to suit */
height: 80px;
margin: 170px auto 0 auto;
}
if you don't know the width of #example3 - and so can't use the auto left and right margins - then you can center it another way by changing it to display: inline-block and setting text-align: center on #example1