Move elements to the right but keep their order in the HTML?

Question

I need a number of elements to line up horizontally in the order in which they appear in the HTML. I need them to move to the right of their container.

If I float the items to the right then the order changes.

If I display as inline-block and make the container's text aligned to the right then there are spaces between them.

I can change the HTML however I cant remove all the white space (which may fix the issue with the inline-blocks). Can this be solved?

http://codepen.io/anon/pen/xbLbLE

<div class="cont">
  <div class='itemA'>1</div>
  <div class='itemA'>2</div>
  <div class='itemA'>3</div>
  <div class='itemA'>4</div>
</div>

<div class="cont contB">
  <div class='itemB'>1</div>
  <div class='itemB'>2</div>
  <div class='itemB'>3</div>
  <div class='itemB'>4</div>
</div>

.itemA,
.itemB {
  width: 50px;
  height: 50px;
}

.itemA {
  background: green;
  float: right;
}

.contB {
  text-align: right;  
}

.itemB {
  background: red;
  display: inline-block;
}

possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — DaniP, Jan 27 '15 at 17:21
Or http://css-tricks.com/fighting-the-space-between-inline-block-elements/ just search a little ... — DaniP, Jan 27 '15 at 17:22
If you have the ability to change the order of the list items, set them to be from last to first, you could still do what you were doing (floating right): http://codepen.io/teknotica/pen/vEJEeW — Teknotica, Jan 27 '15 at 17:23
I second Danko's response - to add to that you can apply 0.25em negative left/right margin to close the gap between the inline-block elements. Something I just discovered today that it appears the gap between inline-block elements are going to be 0.25em of the container font-size. — Fly1nP4nda, Jan 27 '15 at 18:27

score 0 · Answer 1 · answered Jan 27 '15 at 17:24

I am not sure if I am understanding your problem correctly, but can you give this CSS and try and see if it is what you are attempting to do.

.cont{
 display:inline;
 float:right
}

.itemA,
.itemB {
 width: 50px;
 height: 50px;
 display: inline-block;
 margin-right:-4px;
}

.itemA:last-child, .itemB:last-child{
  margin-right:0;
 }

.itemA {
 background: green;
}

.contB {
 text-align: right;  
}

.itemB {
 background: red;
}

The margin-right:4px is a hack around the display:inline-block; so, this may not be desirable.

potashin · Answer 2 · 2015-01-27T17:34:41.617

0

.itemA,
.itemB {
  width: 50px;
  height: 50px;
  display:inline-block;
}
.itemA { background: green; }
.cont { display:inline-block; word-spacing: -100%; }
.contB { float:right; }
.itemB { background: red; }

CodeOpen

edited Jan 27 '15 at 17:34

answered Jan 27 '15 at 17:24

potashin

44,205
11
83
107

hungerstar · Accepted Answer · 2015-01-27T17:38:15.313

Float the elements that need to be in the correct order to the left and float their container to the right.

HTML

<div class="cont">
     <div class='itemA'>1</div>
     <div class='itemA'>2</div>
     <div class='itemA'>3</div>
     <div class='itemA'>4</div>
</div>
<div class="cont contB">
     <div class='itemB'>1</div>
     <div class='itemB'>2</div>
     <div class='itemB'>3</div>
     <div class='itemB'>4</div>
</div>

CSS

.itemA,
.itemB {
  width: 50px;
  height: 50px;
}
.itemA {
  background: green;
}
.itemB {
  background: red;
}
.cont {
    float: right;
}
.cont div {
    float: left;
}

and the jsFiddle: http://jsfiddle.net/enaeLr60/

The downside, as you have noticed, with using display: inline-block is that any space between each inline-block will be rendered as a single space. I prefer to float items to fix this versus the options like the following as they a not preferred.

<div>1</div><div>2</div> - no spaced between elements
<div>1</div><div>2</div> - comment between elements
use a negative margin

UPDATE

My original answer forgot to include a wrapper around the .cont DIVs. As a result the DIVs with .itemA appear after the .itemB DIVs. See updated code to correct this.

HTML

<div class="list-container">
     <div class="cont">
         <div class='itemA'>1</div>
          <div class='itemA'>2</div>
          <div class='itemA'>3</div>
          <div class='itemA'>4</div>
     </div>
     <div class="cont contB">
          <div class='itemB'>1</div>
          <div class='itemB'>2</div>
          <div class='itemB'>3</div>
          <div class='itemB'>4</div>
     </div>
</div>

CSS

.itemA,
.itemB {
  width: 50px;
  height: 50px;
}
.itemA {
  background: green;
}
.itemB {
  background: red;
}
.list-container {
    float: right;
}
.cont,
.cont div {
    float: left;
}

updated jsFiddle: http://jsfiddle.net/enaeLr60/1

score 0 · Answer 4 · answered Jan 27 '15 at 17:26

My answer involves adding a wrapper around it all: http://codepen.io/anon/pen/KwvwyL

<div class="wrapper">
  <div class="cont contA">
      <div class='itemA'>1</div>
      <div class='itemA'>2</div>
      <div class='itemA'>3</div>
      <div class='itemA'>4</div>
  </div>

  <div class="cont contB">
      <div class='itemB'>1</div>
      <div class='itemB'>2</div>
      <div class='itemB'>3</div>
      <div class='itemB'>4</div>
   </div>
</div>

Then in the CSS:

.wrapper {
  float: right;
}
.contA {
  float: left;
  background: green;
}

.contB {
  float: left;
  background: red;
}

.itemA, .itemB {
  float: left;
}

Move elements to the right but keep their order in the HTML?

4 Answers4