CSS positioning div above another div when not in that order in the HTML
- by devmode
Given a template where the HTML cannot be modified because of other requirements, how is it possible to display a div above another div when they are not in that order in the HTML and both divs contain data that could produce a varying height and width.
HTML:
<div id="wrapper"
<div id="firstDiv"
Content to be below in this situation
</div
<div id="secondDiv"
Content to be above in this situation
</div
</div
Other elements
Hopefully it is obvious that the desired result is:
Content to be above in this
situation Content to be below in
this situation
Other elements
When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both.
Edit: A CSS solution is the most ideal solution. Thank you for the Javascript options mentioned. Without getting too wordy about what or why (or who) ... I am specifically looking for a CSS only solution (and it will probably have to be met with other solutions if that doesn't pan out).
One more ... there are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated -- given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.
