4

Say I have this

div {
  position:absolute;
  top:0;
}

#right {
  left:50px;
}

#left {
  left:0;
}
<div id="right">World</div>
<div id="left">Hello</div>

When I go to select the text from left to right, it behaves in a visually unintuitive way. In chrome at least, the order in which the elements get considered from selection seems to depend on the order of the elements. Is there a way to change that order without changing the order of the elements?

user81993
  • 6,167
  • 6
  • 32
  • 64
  • Not without telling why you can't change the order, because changing the order seems the way to go. – Martijn Apr 07 '17 at 07:40
  • @Martijn the elements are dynamically added/removed or mostly recycled to minimize DOM changes for performance, they tend to end up in crazy pattern that makes no sense at all when trying to select text from what should be a single row – user81993 Apr 07 '17 at 16:23

2 Answers2

0

You can do this using CSS flexbox. All you have to do is change the values of the div id properties with the CSS.

Code: 

#blockContainer > div {
    border: 1px dashed #000;
}

#blockContainer {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
#right {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}
#left {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}
<div id="blockContainer">
    <div id="right">World</div>
    <div id="left">Hello</div>
</div>

JsFiddle - http://jsfiddle.net/hbk05z8n/

  • They're on the same line in OP's example, can this approach accommodate?... and is there ANYTHING flexbox cannot do?! haha – mayersdesign Apr 07 '17 at 07:46
0

Try this.

div {
 float:left;
 padding-right:2px;
}

#right {
  left:50px;
}

#left {
  left:0;
}
<div>
  <div id="right">World</div>
  <div id="left">Hello</div>
</div>
Kung Fu Panda
  • 636
  • 10
  • 22