CSS for re-ordering content?

Even though CSS is supposed to handle the styling/layout of a web page, there’s still one area I am trying to figure out: the ordering of elements

I am building the HTML with a top-down approach, inserting the elements in the order that they appear visually. Something I’d want to be able to do with CSS.

something like:

a bunch of stuff, ads, news, widgets, sidebars
important content here
a bunch of other stuff, ads, widgets, sidebars

When I view the HTML, with styles turned off, I want to view a document that makes sense and is to-the-point, content-wise.

I want the site title, and main content to appear first, with all the less important stuff below.

And that’s also how I want web spiders to view my web pages.

So I am trying to figure out how to:

  1. Build the HTML document in a content-importance order. Main content first, navigation and secondary elements later.

  2. Use CSS to completely define the visual ordering of the elements… e.g. place the navigation before the article, below the header. Place the sidebar on the left of the main content. etc…

Is this already possible? Simple? Any good examples of this method I can study?

Thank you

  1. Build the HTML document in a content-importance order. Main content first, navigation and secondary elements later.

This is a matter of preference there is a school of coding hat believe the content comes first , and in order of importance and finally the nav, and another school that believes the nav should be first ( after all how can you get to where you are going… especially in a large site)… yet another that actually orders it by need of presentations ( since floated items must always be at the top of their containers code).

Personally… I write the code W/O or images first… does it make sense that way? Only then do I figure how to style it.

There are some basic and rather frustrating limitations to to CSS. I would list the main 2 as : equal height elements and arranging order of content. There are some faux methods you can use to compensate for the previous, all of which have their strengths and trade off. This is why you may notice that lot of the people on the forum who know their stuff, need to see your HTML mark up and what specifically you are tying to do in order to answer your question. The way you make a 3equal-height column site differs from how you would attempt a 5 equal-height column site ( and some might just ask why do you even want 5 colum)

As for the latter—content arrangement. Horizontally switching aliment is easy with CSS, its vertical that CAN be a problem… especially since you are bound to have dynamic heights at some point.

Lets starts simple, if somewhat unrealistic. if you KNEW the size of all of your elements you could use AP to place them anyway you wanted them, regardless of where they were on the source order. you would also be wise to give the element that contains your page a defined width and height equal to the total width and height of all your elements…but in real life situation you may NEVER encounter a page where the content is so static or even predictable that you can know the “total” size of it. And this calcs would be rather convoluted and would have to be done for EVERY page … which is kind of counters the point of a SITE WIDE style sheet… none the less that is ONE WAY it CAN be done (not that it ever SHOULD be done)

Horizontal. If you have two elements in the mark up.

<div class=“el1”>bah</div>
<div class=“el2”>bah</div>
you can float them both ( let’s say float:left;) and use margins ( and widths) to switch their position.
So .el2 would have a margin-left:-100%, and .el1 would have a margin-left: (width of el2);

( yeah you could have also floated on to the right, but I am trying to explain the principle behind how horizontal switching is done). Alternately, you could use relative positioning instead of margins.

Vertical switching is another challenge all together. Vertical margins are calculated based on the WIDTH of the container not the height. Thats one problem, the other problem floats cannot be displayed ABOVE other floats previous in the source code.

this means the only way you can use margins or relative pos. to vertically switch elements with css is IF YOU KNOW their height explicitly , preferably in px or or MATCHED ems.

so something like this:
.e1{ height:100px; position:relative; top:200px;}
.e2{ height:200px;position:relative; top:-100px;}
the problem is that the number of case where you you know the height of an element is very limited, and in itself risky ( what if you define a height to contain your content, but the user chooses to make the font-size bigger?)

Enter CSS3 this is not widely supported or even approved yet… but CSS3 actually allows you to switch the order… the flex-box model makes a lot of strides towards being able to switch the display order of your code… http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

but we may have to wait a while until its supported my MOST UAs


You can do quite a bit of moving around using floats to produce different layouts using the same structure but there are limitations of course.

A long long time ago I did this example which shows how many variations you can make from one simple page structure. It has limitations and not all things are possible as you can’t move the footer above the header or move the header into the middle. It does show quite a bit of flexibility though.

You can also move elements around using absolute positioning but you can only do that when you have a fixed height to work with and would only be suitable for a few cases such as fixed height navigation etc.

The flexible box model layout that dresden linked to above is the answer to all these questions but will be some time before implemented by all browsers.