Question

I have a centered div whose height depends on the user screen resolution ( div1 ). I would like to automatically position a second div ( div2 ) exactly under it ( again in the center ), preferably without the use of either calculations/javascript or the use of a wrapping table

<div id="div1" class="div1"></div>
<div id="div2" class="div2"><input type=image src=bla.jpg></div>

css:

.div1 {
    position: absolute;
    overflow: hidden;
    top: 10px;
    left: 0px;
    right: 0px;
    width: 50%;
    height: 65%;
    min-width: 100px;
    min-height: 200px;
    max-width: 200px;
    max-height: 300px;
    background-color: red;
    border: 1px solid #000000;
    margin: 0 auto;
}

.div2 {
    position: relative;
    display: table;
    overflow: hidden;
    top: 200px;
    border: 1px solid #000000;
    padding: 0px;
    margin: 0 auto;
    background-color: yellow;
    visibility: visible;
}

not working jsfiddle : http://jsfiddle.net/Y4kga/
the yellow div should be exactly ( touching ) under the red div

p.s. i’m using display: table because i have insite input type=image and i want the width the be as big as the input type.

How should i do this ?
thanks in advance!

Answer 1

Remove the absolute positioning from your div1 and add it to a wrapper div. Then the browser’s layout engine can take care of positioning the yellow div beneath your red div.

<div class="wrapper">
    <div id="div1" class="div1"></div>
    <div id="div2" class="div2">lol</div>
</div>

Since div1 is no longer absolutely positioned, you can horizontally center using auto-margins.

.div1 {
margin: 0px auto;
    margin-top: 10px;
}

http://jsfiddle.net/Y4kga/3/