Using css to change the order of HTML elements

Question

If there is a specific name for the following thing, please tell me so I can make some proper research (so far what came up from my searches was things with the z index which is something totally different).

Alright, Consider the following situation. You have:

<div class="foo">Foo</div>
<div class="bar">bar</div>

Suppose the classes are defined in css sheets, so when you add another css sheet they change.

For the properties like font, color, bg it clear to me.

The question is how to modify their position. Consider that I want the following output: (you can only change the css) 'Foo' to be second, 'bar' to be first. 'foo' and 'bar' to be on one row.

PS: if there is a specific name for this (changing position with css styles) please tell me.

steveax · Accepted Answer · 2013-07-27 07:21:40Z

2

Changing index is not possible through css you can just style them:

http://jsfiddle.net/K9Pj8/

like

.foo{ position: relative; top: 20px;}
.bar{ position: relative; top: -20px;}

There is a further more you can do it with a wrapper like this example:

http://jsfiddle.net/K9Pj8/1/

edited Jul 27, 2013 at 7:21

steveax

17.8k6 gold badges46 silver badges59 bronze badges

answered Jul 27, 2013 at 5:48

Hushme

3,1541 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Stanimirovv Over a year ago

Interesting. That might as well be what I am looking for.

steveax Over a year ago

Probably be better to use em rather than px for the unit, more robust that way.

Hushme Over a year ago

@steveax em are dependent on font-size in px too

steveax Over a year ago

Indeed, and the also scale more gracefully :-)

user1721135 · Accepted Answer · 2013-07-27 05:52:34Z

1

You have several options to position divs with css.

position is one of them.

For a more flexible solution you can also use float.

Whatever you need on the right assign float:right;

Whatever you need on the left assign float:left;

Demo

http://jsbin.com/oluyay/1/edit

answered Jul 27, 2013 at 5:52

user1721135

7,1128 gold badges39 silver badges67 bronze badges

Comments

Arghya C · Accepted Answer · 2013-07-27 05:53:57Z

0

Try manipulating position css attribute with top, left, bottom, right as required. If you want them to be one after another horizontally, you can try float:left

answered Jul 27, 2013 at 5:53

Arghya C

10.1k4 gold badges51 silver badges70 bronze badges

Comments

Shiva Avula · Accepted Answer · 2013-07-27 05:57:13Z

0

Yes, you have to use css floats to achieve it.

A float simply pushes elements to a specified direction and stacks up according to available space.

To get the result you need to apply this,

.foo, .bar { float: right; }

Make sure you have these tags wrapped in a parent element and make it as inline-block, or else they will float to end of full block

Check this fiddle http://jsfiddle.net/8hAmw/

answered Jul 27, 2013 at 5:57

Shiva Avula

1,8561 gold badge20 silver badges29 bronze badges

Collectives™ on Stack Overflow

Using css to change the order of HTML elements

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related