Find solution
How do you search DOM elements using CSS selectors in Chrome?

Swap HTML elements using CSS?

  • 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.

  • Answer:

    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.

idzyn at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

Are you stuck with CSS? Can you use Javascript? If so, check out jQuery, it's magic.

bprater

Embedding Javascript in CSS is sometimes possible if you're feeling evil, and all you've got to play with are a <style>

Freaky

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).

cschneid

Javascript. Or have them restructure the html on the main site while keeping in mind the fact that it has to degrade gracefully.

beerbajay

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.

AmbroseChapel

If you give them fixed heights, I'd imagine a float and some negative margins, combined with a clear might just do the trick.

djgh

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...

djgh

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.