Can CSS truly override the order of HTML elements on a page?

Question

If you have several DIVs on a page, you can use CSS to size and float them, and move them round a little...but I can't see a way to get past the fact that the first DIV will show near the top of the page, and the last DIV will be near the bottom! I cannot completely override the order of the elements as they come from the source HTML.....can you?

I must be missing something, because people say, "we can change the look of the whole website by just editing one CSS file." But that would depend on you still wanting the DIVs in the same order!

(P.S. I am sure no-one uses "position:absolute" on every element on a page.)

Answer 1

yes, css can do that, but generally you have a bit of "common sense" order where you place the divs in the HTML

Answer 2

You don't need position:absolute on every element to do what you want.

You just use it on a few key items and then you can position them where-ever you want, moving all the items contained within them along with the root element of the section.

Answer 3

CSS can take elements out of the normal flow and position them anywhere, in any manner you want. But it cannot create a new flow. By this I mean that you could position the last item at the top of the page and the first item at the bottom, but when you do that you can't position them relative to each other; you have to know for yourself where the bottom of the page will be.

Answer 4

You may want to look at CSS Zen Garden for excellent examples of how to do what you want. Plenty of sample layouts via the links on the right to see the various way to move everything using strictly CSS.

Answer 5

I think that the most important factor is to place your html elements in a way that makes sense semantically, and with luck your layout in CSS will not have to do too much work. For example, your site's header will probably be the first element on the page, followed by common navigation, then sub-navigation, content and the footer (incomplete list).

Probably around 90-95% of the layouts you'll want to work with should be relatively trivial to manipulate that markup into something like what you're after. the other 5-10% will still be possible, with a little more effort, but the question you need to ask yourself is "How often am I likely to want my site header positioned in the bottom-right corner of the page?"

I've always found that the layout of a site is not too tough to manipulate after the fact if you do want to dramatically change the look and feel, at least in comparison with a ground-up recode.

</2c>

Answer 6

Good point about the header always being first and the footer last! But I might want to move my advertising DIV from along the top, to down the right.

The other thing I've heard about is putting the content DIV first, so Google pays you more attention (relevant keywords near the top of the page score higher)...or is that a myth? Doing that would require the sort of CSS trick I'm enquiring about too.

Answer 7

With Floating, and with position absolute, you can pull some pretty good positioning magic to change some of the order of the page.

For instance, with StackOverflow, if the markup was setup right, the title, and main body content could be the first 2 things in the markup, and then the navigation/search, and finally the right hand sidebar. This would be done by having a content container with a top margin big enough to hold the navigation and a right margin big enough to hold the sidebars. Then both could be absolutely positioned in place. The markup might look like:

<h1> Stack Overflow </h1>
<div id="content">
  <h2> Can Css truly blah blah? </h2>
  ...
</div>
<div id="nav">
  <ul class="main"><li>quiestions</li> ... </ul>
  ....
</div>
<div id="side">
  <div class="box">
    <h3> Sponsored By </h3>
    <h4> Lew Zelands fish market </h4>
    ....
  </div>
</div>

And the css like

h1 { position: absolute; top: 0; left: 0; }
#content { margin-top: 100px; margin-right: 250px; }
#nav { position: absolute; top: 0; left: 300px; }
#side { position: absolute; right: 0; top: 100px; }

The important thing here is that the markup has to be done with this kind of positioning magic in mind.

Changing things so that the navbar is on the left and the sidebar below the nav be too hard.

Answer 8

You can position individual boxes completely independent from the source order using position:absolute. So you can move the header to the bottom of the page, and the footer to the top using CSS.

Note however that this is genereally bad for accessibility: You should have the order of the content in the source more or less in the same order that you would present it for the reader. The reason is that a screen reader or similar device will present the content in the order it is defined in the source rather than the visual order defined by your CSS.