Swap HTML elements using CSS?

February 17, 2008 8:42 AM

How do I swap the order of two HTML elements using CSS?

I'm creating an iPhone specific style of my local newspapers website. I can not alter their HTML code, but their code places the main story third in the order of information, and the "todays news" links second. I would like to swap the two using CSS. Oversimplified example:

<p id="first">First Paragraph in code</p>
<p id="second">Second paragraph in code</p>

would appear in the browser as:

Second paragraph in code
First Paragraph in code

The two "paragraphs" will never be a fixed dimension, so I need them to flow as if they were positioned in the HTML with Second coming before First.

Any ideas? I've tried absolute, fixed positioning and floats, but none seem to work just right.

posted by idzyn to Computers & Internet (8 answers total)

Reordering document nodes is not really what CSS is for. You can fake it sometimes, but only in very specific circumstances. You could do it pretty easily with a little JavaScript, though.
posted by kindall at 8:58 AM on February 17, 2008

Are you stuck with CSS? Can you use Javascript? If so, check out jQuery, it's magic.
posted by bprater at 8:58 AM on February 17, 2008

Embedding Javascript in CSS is sometimes possible if you're feeling evil, and all you've got to play with are a <style>
posted by Freaky at 9:25 AM on February 17, 2008

Since you never know the sizes of the two items, I don't think there is a way to do this in css (which would probably be some hacky combination of left and top, and absolute positioning).

Just tell them that you must use a little javascript to be included only for the iphone platform. You'll need to do this anyway to use the various look and feel libraries out there. Should be easy enough to convince that it's needed (good luck).
posted by cschneid at 10:01 AM on February 17, 2008

Javascript.

Or have them restructure the html on the main site while keeping in mind the fact that it has to degrade gracefully.
posted by beerbajay at 10:07 AM on February 17, 2008

You could change their order on the page by floating -- but then they'd be side by side instead of above each other. Unless someone knows some bizarre trick I'm not aware of.
posted by AmbroseChapel at 5:13 PM on February 17, 2008

If you give them fixed heights, I'd imagine a float and some negative margins, combined with a clear might just do the trick.
posted by djgh at 7:20 AM on February 18, 2008

Musing here, but given that the site probably uses a CMS, and this is probably designed to only allow x lines of text before having a "More" link or somesuch, and that you may be able to define lineheight etc. in ems, it may be possible to determine the height of the element without having to do fixed height. May. And this whole idea is kinda reliant on the negative margin/float/clear combo working, which it may well not. As has been said, this really isn't what CSS is for...
posted by djgh at 7:23 AM on February 18, 2008