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

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