how to place one div on top of another, when both are centered using auto margin?

Question

I have 2 divs, a square and a bar. Both are centered using auto margin. But I want to place bar over square. How can I do this?

html

<div class="square">square</div>
<div class="bar">square</div>

css

.square,.bar{
    margin-left:auto;
    margin-right:auto
}
.square{
    background-color:blue;
    width: 100px;
    height: 100px;
}
.bar{
    background-color:green;
    width: 400px;
    height: 40px;
}

Here is the fiddle.

I supposed this was what you want http://jsfiddle.net/viphalongpro/P9yWK/3/ — King King, Jun 09 '14 at 15:33
Duplicate of http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div?rq=1 — Paulie_D, Jun 09 '14 at 15:50

myfunkyside · Answer 1 · 2014-06-12T03:58:33.917

0

You could do it like this: http://jsfiddle.net/mz6rk/

I made position:relative and placed the bar at -square_height/2 - bar_height/2

This does assume you know the height of both the square and bar though, I don't know if that's always the case..

UPDATE: Actually, only the bar needs to have position:relative (I put it on both in the fiddle).

edited Jun 12 '14 at 03:58

answered Jun 09 '14 at 15:33

myfunkyside

3,890
1
17
32

score 0 · Accepted Answer · answered Jun 09 '14 at 15:42

http://jsfiddle.net/atomicrevolution/P9yWK/5/

Is this what you mean?

.square,.bar{
    margin-left:auto;
    margin-right:auto;
}
.square{
    background-color:blue;
    width: 100px;
    height: 100px;
    position: relative;
}
.bar{
    background-color:green;
    width: 400px;
    height: 40px;
    position: relative;
    margin-top: -70px;
}

how to place one div on top of another, when both are centered using auto margin?

2 Answers2