Question

I have some HTML codes like

<div id="top" style="height: 50px"></div>
<div id="bottom" style="height: 50px"></div>
<div id="content">Here goes some text</div>

I want the middle div (#bottom) to be positioned on top of the div (#top) and while doing so, the #content div should automatically move up by 50px.

If i code like

<div id="bottom" style="height: 50px; position: relative; top: -50px;"></div>

the #bottom div do moves up but the #content div stays behind.. leaving a 50px gap between.

So how should I position it??

Answer 1

If I’m understanding correctly, you want to take #bottom and remove it from the regular page flow, placing it over-top-of #top.

Two ways to take an element out of the regular page flow are position:float; and position:absolute;

Not knowing what the rest of your page looks like I suggest something like:

<div id='container' style='position:relative'>
  <div id="top" style="height: 50px"></div>
  <div id="bottom" style="height: 50px; position:absolute; top:0em; left:0em;"></div>
  <div id="content">Here goes some text</div>
</div>

That will put #bottom in the top, left-hand corner of #container, which is also where #top will be. #container being part of the regular page flow will be right below #top.

For centering an absolutely positioned element you can do like this:

<div style="display:table; margin: 0 auto;">  <!-- display:table; to 'shrink-wrap' the div - margin: 0 auto; to center it->
    <div style="position: relative; float:left;"> <!-- float also shrink-wraps -->
        <div id='top'>top div content</div>
        <div id='bottom' style="position:absolute; top:0em; width:100%; text-align:center;"> content of bottom div </div>
        <div id='content'></div>
    </div>
</div>