align one div tag below another tag

Question

I have two div tags as below

<div id="outer">
    <div id="lower">hi</div>
    <div id="upper">i m on top</div>
</div>

I want to display the upper div first, followed by the lower div but I can not change the declaration order in HTML.

I am using the following css

#outer{
    position:relative;
}
#upper{
    position:absolute;
    top:0;
}

But the upper is overlapping with lower.

UPDATE

I tackled the situation in following way as it does not disturb the design

<html>
  <body>
    <div id="visible"></div>
    <div id="bottom">displayed in second line</div>
    <div id="top" style="display:none;">
      displayed in first line
    <script>
      document.getElementById("visible").innerHTML=document.getElementById("top").innerHTML
      </script>
    </div>
  </body>
</html>

By using the above code i perfectly tackled my use case. Thanks for everyone for giving answers

If you know the height of `upper` you can as well use something like `position:absolute; top:300px; <-- the height` for `lower`. — Ali Bassam, Apr 22 '13 at 15:00
it is a dynamic content i guess @cimmanon answer will solve the problem — Aditya Shanker Tagirisa, Apr 22 '13 at 15:50

score 1 · Answer 1 · answered Apr 22 '13 at 15:22

1

Here are two solutions :

You know the upper div's height :

#outer {
    position: relative;
}
#lower, #upper {
    position: absolute;
    left: 0;    
}
#lower {
    top: 40px; /* upper div's height */
}
#upper {
    top: 0;
    height: 40px;
}

You know the outer div's height :

#outer {
    position: relative;
    height: 300px;
}
#lower, #upper {
    position: absolute;
    left: 0;
}
#upper {
    top: 0;
}
#lower {
    bottom: 0;
}

answered Apr 22 '13 at 15:22

zessx

68,042
28
135
158

this will help only when we have static content i am having dynamic content anyways thanks for the answer – Aditya Shanker Tagirisa Apr 22 '13 at 15:52

score 0 · Accepted Answer · answered Apr 22 '13 at 15:28

If both of your elements are of unknown heights (very likely if this is dynamic content), then Flexbox will allow you to reorder your elements.

http://tinker.io/aa4b2

#outer {
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

#lower {
  -moz-box-ordinal-group: 2;
  -webkit-flex-order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

The down side is that support for Flexbox is rather low. This should work in Chrome, Firefox, Opera, Safari, and IE10. http://caniuse.com/#feat=flexbox

align one div tag below another tag

2 Answers2