Changing display position without changing html structure

Question

I have two divs and they all are set to float right. Now I want the 'First div' to be displayed before 'Second Div' but without changing the html structure.

Html code--

<div class="one">
  First Div
</div>
<div class="two">
  Second Div
</div>

Demo -- https://jsfiddle.net/squidraj/31b9ndbs/

Not sure if this is possible at all. Any help is highly appreciated.

In order to achieve what you want, you would unfortunately have to apply a wrapper around your divs. The parent div you then would float right, and then your div one and div two would both float left to be able to get the order you want. Is jQuery ok to use if you can't change the HTML directly? — Pegues, Mar 09 '17 at 12:02
Offcourse I can change the html but doing that it will take another couple of hours so I thought it might be better just to adjust the css? — Prithviraj Mitra, Mar 09 '17 at 12:03
@Pegues In that case I have to add a wrapper. I was trying not to touch html. — Prithviraj Mitra, Mar 09 '17 at 12:04
As Pegues said, you need to wrap the two divs --> https://jsfiddle.net/sol_b/dbt6ynLc/1/ -- where body is replaced by your container — sol, Mar 09 '17 at 12:04
There are other reasons as well why you want to use a wrapper around your two divs anyway, because floats have a tendency to alter content position unless you clear the float. All in all, the best thing to do is apply that parent wrapper, and then you make it easier to clear the float for content following your floats, and you can also position your divs as you want. Sorry I don't have a better answer for you. — Pegues, Mar 09 '17 at 12:08
Possible duplicate of [HTML float right element order](http://stackoverflow.com/questions/8287265/html-float-right-element-order). And [Float div's to the right in left-to-right order?](http://stackoverflow.com/questions/9280247/float-divs-to-the-right-in-left-to-right-order) And [this](http://stackoverflow.com/questions/2049608/how-to-use-float-without-flipping-floated-item-and-changing-in-source-order-is). And [that](http://stackoverflow.com/questions/4224476/floatright-reverses-order-of-spans). And [that](http://stackoverflow.com/questions/3117815/how-to-change-the-order-floated-elements). — Just a student, Mar 09 '17 at 12:09
Did I mention [this one](http://stackoverflow.com/questions/14538106/how-to-float-two-elements-to-the-right-maintaining-the-same-order-visually-and-s) and [that one](http://stackoverflow.com/questions/25710215/change-order-of-floated-divs-with-css) yet? — Just a student, Mar 09 '17 at 12:13
I'm leaving this question post now. Good luck with your project. — Pegues, Mar 09 '17 at 12:18
Possible duplicate of [Float div's to the right in left-to-right order?](http://stackoverflow.com/questions/9280247/float-divs-to-the-right-in-left-to-right-order) — Just a student, Mar 09 '17 at 12:47

Oke Tega · Answer 1 · 2017-03-09T12:09:10.533

1

You would definitely need a wrapper. Just understood your question

.wrapper {
  float: right;
}
.one {
  float: left;
}

.two {
  float: left;
}

<div class="wrapper">
<div class="one">
  First Div
</div>
<div class="two">
  Second Div
</div>
</div>

edited Mar 09 '17 at 12:09

answered Mar 09 '17 at 12:03

Oke Tega

850
10
21

score 1 · Answer 2 · answered Mar 09 '17 at 12:09

Try something like this

#Container {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
#blockA {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
#blockB {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}

<div id="Container">
    <div id="blockA">first div</div>
    <div id="blockB">second div</div>
    <div id="blockC">third div</div>
</div>

Or you can do this with order property like

#Container{
  display:flex;
  flex-flow: column;
}
#blockA{
  order:4;
}
#blockB{
  order:3;
}
#blockC{
  order:2;
}

<div id="Container">
    <div id="blockA">first div</div>
    <div id="blockB">second div</div>
    <div id="blockC">third div</div>
</div>

score 1 · Answer 3 · answered Mar 09 '17 at 12:10

1

Heard of flex-box? It's gonna help you a lot! You can read more about order here

.one {
  order: 2;
}

.two {
  order: 1;
}
.container{
  display:flex;
  flex-direction: row-reverse
}

<div class="container">
  <div class="one">
    First Div
  </div>
  <div class="two">
    Second Div
  </div>
</div>

answered Mar 09 '17 at 12:10

Saurabh Sharma

2,422
4
20
41

You are missing the point. The OP was looking for a way without altering the HTML. Sure, if he alters the HTML there are a bunch of ways he can achieve what he needs. And flex should not be used as a first choice. Think cross browser support! – Pegues Mar 09 '17 at 12:16
Yes..Used flex-box before but if I use it in my current code now then I have to change other bits a lot to fit that property in. – Prithviraj Mitra Mar 09 '17 at 12:17

score 0 · Answer 4 · answered Mar 09 '17 at 11:58

0

.one{
    float:right;
}
.two{
    float: left;
}

answered Mar 09 '17 at 11:58

Aslam

9,204
4
35
51

Changing display position without changing html structure

4 Answers4