Render Order via HTML or CSS

Question

What is the best practice is in the case of altering the render order of elements on a webpage. For example, I have two DIVs that are to be displayed on a page:

<div id="appleSection" class="appleStyle">
    <!-- Apple DIVs, content, form elements, etc -->
</div>

<div id="orangeSection" class="orangeStyle">
    <!-- Orange DIVs, content, form elements, etc -->
</div>

Depending on user selection (perhaps by country or something), the order which the DIVs are presented to the user can differ when the user changes their selected country. Certain country selections present the appleSection above orangeSection, and for other selections, their order is reversed.

If the core logic of the page is the same regardless, is it a best practice to determine order on the server-side (perhaps via two pages that differ in the order of the DIVs), or is it more appropriate to have just a single page and use CSS to control whether appleSection is above orangeSection or vice versa?

Answer 1

Does the order of the selections have to change instantaneously? As in, does it have to change when the user selects a country? Or is it pre-rendered?

If it is the latter, I would do it from the server-side. I'd send in a flag of some sort. Assuming you are using JSTL or ASP or something you can control the order based on the value of the flag. I think two pages to do the same thing isn't a good idea because that is significant duplication of code.

If it has to change based on user interaction, I would use something like jQuery along with the appropriate CSS (change the classes using jQuery based on user input).

Answer 2

This is not (nicely) possible with pure CSS. The only way would be using position: absolute; and stick the elements there where you want by pixel coordinates. But to get it to display nicelly, you'd need to know the element heights beforehand or to make the content scrollable.

Another client side way would be using JavaScript, but this may cause "wtf?" experiences of the enduser when s/he sees the elements instantly swapping/moving/resizing during page load. Also not very nice and not really unobtrusive (won't work as intented if client has JS disabled).

The best way would indeed be to just do this in the server side view technology in question using some conditional statement.

Answer 3

Here is one possible solution (it depends on how you want to display your sections).

<div id="fruitstand" class="apples-first">
    <div id="apples"></div>
    <div id="oranges"></div>
</div>

and in CSS:

#fruitstand.apples-first #apples {
    float: left;
}
#fruitstand.oranges-first #oranges {
    float: left;
}