Question

I will try to keep this as short and specific as I can.

This is what I need to display:

-----------------------------------------
#div1
-----------------------------------------
-----------------------------------------
#div2
-----------------------------------------

This is how I need the HTML structure to be:

<div id="div2">...</div>
<div id="div1">...</div>

The reason I need the second div to be higher in the HTML structure is because when the page is printed in Firefox, I have to use fixed position for an image that is contained in “div2”. If “div2” isn’t at the top of the structure, the image will be printed on the second page, and therefore cannot be moved to the first page using fixed position (as far as I know).

I cannot for the life of me think how I can do this with CSS2 (maybe CSS3?). I also looked into “Any Order Column” but I don’t think that will work since I’m dealing with rows, not columns.

Any help would be appreciated 🙂

Edit: #div2 cannot be positioned absolutely because #div1 needs to be able to collapse, and therefore #div2 needs to follow.

Answer 1

For this you can use css3 display:box property for this. Write like this:

.outer{
   -moz-box-direction: reverse;
    -moz-box-orient: vertical;
    display: -moz-box;
}

Check this http://jsfiddle.net/phSfD/2/