Is there a way to change the order of HTML DIV's using only CSS?

Question

I have a .HTML file in which I cannot change, under no circumstances.

I have to style the webpage which makes the Header DIV at the top of the page (100% width), Navigation DIV (25% width) appear down the left hand side BELOW the Header DIV, with the Sales DIV (75% width), appear to the right-hand side of the Navigation DIV, with the Products DIV (100% width) below the Sales DIV.

With the footer DIV at the very bottom below all of the other DIV's on the page, 100% width.

<body>
    <div id="wrapper">
        <div id="nav"></div>
        <div id="header"></div>
        <div id="sales"></div>
        <div id="products"></div>
        <div id="footer"></div>
    </div>
</body>

Is it possible to do this without changing the logical order of the HTML DIV's and only using CSS positioning, floats, etc?

Yes, it is. Have you tried just anything? We don't want to do your work. — looper, Nov 23 '12 at 12:48
Have you tried using position? a good example of css possibilities is [css zen garden](http://www.csszengarden.com/). — Eric, Nov 23 '12 at 12:50
just write your requirements into a stylesheet... you really got it, just finish it off you are totally correct... and if it does not work then try a bit before coming here — Vogel612, Nov 23 '12 at 12:51

gkond · Answer 1 · 2012-11-26T08:02:28.250

If you can fix the header height, then it's pretty trivial, just use position:absolute or negative margins for #header:

#wrapper {positioN:relative;padding-top:100px;}
#header {position:absolute;top:0;width:100%;height:100px;}
#nav {display:inline-block;width:25%;}
#sales {display:inline-block;width:75%;}
#products {margin-left:25%;}
#footer {}

http://jsfiddle.net/FZTj7/1/

And those inline-blocks can be switched to floats to get #nav to go below the top side of products block:

#wrapper {positioN:relative;margin:20px;padding-top:100px;}
#header {position:absolute;top:0;width:100%;height:100px;}
#nav {float:left;width:25%;}
#sales {float:left;width:75%;}
#products {margin-left:25%;}
#footer {clear:left;}

http://jsfiddle.net/FZTj7/2/

score 0 · Answer 2 · answered Nov 23 '12 at 12:50

0

Use the fixed position property and set top property values.

answered Nov 23 '12 at 12:50

SaidbakR

13,303
20
101
195

score 0 · Answer 3 · answered Nov 23 '12 at 12:50

It very much depends on the initial structure of your page. The only option you would have really is to float the divs by applying float:right or float:left to the relevant sections in combination with other css rules.

Using position:* is only applicable in very limited circumstances, and i doubt that alone would be enough to fit your requirements.

score 0 · Answer 4 · answered Nov 23 '12 at 13:01

I know that this doesn't answer the question, but I guess it would be relevant to notify that the reason why it's so difficult to achieve is because this is a bad practice.

To avoid some problems with focus order, SEO or special devices (printer, screen reader, ...): "content should be ordered in a meaningful sequence".

Just have a look at : C27: Making the DOM order match the visual order

score 0 · Answer 5 · edited May 23 '17 at 12:04

Using the css position attribute should be the first thing to try (screencast).

If ever CSS is not enough to achieve your design, an other possibility is to reorder the divs in the dom tree using javascript. JQuery for example has helpers to manipulate DOM nodes.

These are in any case good practices and then should be avoided, but if you can't change the source that's pretty all you are left with.

Edit:

In case you use javascript, you might have to reload css after the divs gets in the right order. Reloading css can also be achieved using javascript.

Is there a way to change the order of HTML DIV's using only CSS?

5 Answers5