CSS positioning

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??

SooDesuNe · Accepted Answer · 2010-09-14 23:39:07Z

2

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>

edited Sep 14, 2010 at 23:39

answered Sep 14, 2010 at 14:51

SooDesuNe

10.1k10 gold badges61 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ptamzz Over a year ago

Thanks, and yes.. that is exactly what I mean. But now i want that #bottom in the middle. I was using m"argin: 0 auto;", now it's not working. so how do i put it in the middle of the page.. or #container??

SooDesuNe Over a year ago

you want to 'center an absolutely positioned element of unknown size'. See my updated answer

Collectives™ on Stack Overflow

CSS positioning

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related