CODEWITHSUNDEEP
csshtml
NotedThat
NotedThat

Reputation: 79

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

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?

Upvotes: 7

Views: 294

Answers (5)

gkond
gkond

Reputation: 4294

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/

Upvotes: 2

Eric
Eric

Reputation: 2894

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.

Upvotes: 0

Charles-&#201;douard Coste
Charles-&#201;douard Coste

Reputation: 1682

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

Upvotes: 0

Phill Healey
Phill Healey

Reputation: 3180

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.

Upvotes: 0

SaidbakR
SaidbakR

Reputation: 13544

Use the fixed position property and set top property values.

Upvotes: 0

Related Questions