css, float alternative

Add display:flex to the parent element and margin-left:auto to any child element.
(that child element and all the next child elements float to right)

div {
  display: flex;
  border: 1px solid green;
}

span {
  border: 2px solid red;
}

#ab2 {
  margin-left: auto; /* this and the next elements float to right */
}
<div>
  <span id="ab1">sometext 1</span>
  <span id="ab2">sometext 2</span>
  <span id="ab3">sometext 3</span>
</div>

Or to display only one element to a side, add higher order to that element

div {
  display: flex;
  border: 1px solid green;
}

span {
  border: 2px solid red;
}

#ab2 {
  margin-left: auto;
  order: 1; /* this becomes the last element, only this element float to right */
}
<div>
  <span id="ab1">sometext 1</span>
  <span id="ab2">sometext 2</span>
  <span id="ab3">sometext 3</span>
</div>

You can use display flex for container and margin-left: auto for #ab2.

div{
    display: flex;
}
#ab2{
    margin-left: auto;
}

Use position:absolute and text-align:right

CSS

div{background:red; text-align:right; position:relative;}
#ab1{position:absolute; left:0; background:yellow;}
#ab2{background:yellow;}
#ab3{background:yellow;}

DEMO

Tags:

Html

Css

Recent Posts