CSS layout, use CSS to reorder DIVs

Question

Given that the HTML

<div>
   <div id="content1"> content 1</div>
   <div id="content2"> content 2</div>
   <div id="content3"> content 3</div>
</div>

render as

content 1
content 2
content 3

My question:

Is there a way to render it as below by using CSS only without changing the HTML part.

content 1
content 3
content 2

Answer 1

One word answer: nope. Look into XSLT (XML Stylesheet Language Transforms), which is a language specifically geared towards manipulating XML.

Answer 2

It might not exactly match what you're after, but take a look at this question:
CSS positioning div above another div when not in that order in the HTML

Basically, you'd have to use Javascript for it to be reliable in any way.

Answer 3

I got it to work by doing this:

#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }

but keep in mind that this will not work for you as soon as you have dynamic content. The reason I posted this example is that without knowing more specific things about your content I cannot give a better answer. However this approach ought to point you in the right direction as to using relative positioning.

Answer 4

http://www.pagecolumn.com/3_column_div_generator.htm

Answer 5

This is one of the classic use-cases for absolute positioning--to change rendering from source order. You need to know the dimensions of the divs to be able to do this reliably however, and if you don't javascript is your only recourse.

Answer 6

I was messing around in Firefox 3 with Firebug, and came up with the following:

<div>
  <div id="content_1" style="height: 40px; width: 40px; background-color: rgb(255, 0, 0); margin-bottom: 40px;">1</div>
  <div id="content_2" style="width: 40px; height: 40px; background-color: rgb(0, 255, 0); float: left;">2</div>
  <div id="content_3" style="width: 40px; height: 40px; background-color: rgb(0, 0, 255); margin-top: -40px;">3</div>
</div>

It's not perfect, since you need to know the heights of each container, and apply that height value to the negative top margin of the last element, and the bottom margin of the first element.

Hope it helps, nd

Answer 7

If you know the height of each element then it is a simple case of vertical relative positioning to swap around the orders. If you don't know the heights then you either have to give them heights and allow the divs to get scroll bars if there is any overflow or calculate it all with JavaScript and add the relative positioning on-the-fly.