CODEWITHSUNDEEP
css
AKor
AKor

Reputation: 8882

Rearranging div elements using purely CSS

My site's main stylesheet has the div elements arranged in a very particular order. In my print stylesheet, I wish to rearrange the order of my div elements using purely CSS. How can I do this?

Presume these to be divs in my main stylesheet:

a d

b e

c f

I want it to look like this on my print stylesheet (I remove non-printer friendly divs):

a

f

c

d

Upvotes: 0

Views: 1318

Answers (4)

wdm
wdm

Reputation: 7189

You can remove the unwanted divs and stack the remaining divs like this...

http://jsfiddle.net/ywTJy/2/


div {
    width: 50%;
    background-color: #ccc;
    float: left;
}

/* print CSS */

div {
    float: none;
    width: 100%;
}

#b, #e {
    display: none;
}

I'm not sure if you intentionally want to move the "F" div to the 2nd position but it seems awkward if you would order your content one way for the Web and re-order it for print.

Upvotes: 1

Phrogz
Phrogz

Reputation: 303168

In general, no: you cannot cause position:static items (the default) to flow in a different order. CSS change change the presentation of elements, but there is a fuzzy line between what is semantic in your content and what is the presentation. Just as one sentence and paragraph logically follows the other, you cannot use CSS to change the meaning of the content.

Upvotes: 0

SpliFF
SpliFF

Reputation: 38956

If the content is flowed and/or dynamic you're going to have problems. If you can reliably know where the items will be in relation to each other you can do things like:

<div style="width:100px;position:relative;left:100px">
<div style="width:100px;position:relative;left:-100px">

Which would swap the visual position of two side-by-side divs.

Upvotes: 0

Shannon
Shannon

Reputation: 2744

Depends on exactly how you "want" to position them, and there are many ways to use CSS. The most barebones basic way to move a div all around the page would be using position: absolute and adjusting top/left/etc CSS properties accordingly. I think it should still work with print fine.

Mind you, I wouldn't rely "solely" on absolutely positioned items to design a webpage, but that's one way.

Upvotes: 0

Related Questions