0

My question is a bit like this one: CSS: alight left and right within the same line (without floats)
The difference is that i have 3 elements in a row (date, title, author) and I want the author to be aligned right.

Here's a JSFiddle with a part of the solution. The problem is, that in my fiddle the author is positioned absolutely, so while making the window smaller you'll see that at some point the title will overlap the author.

.e-author {
    position: absolute;
    right: 0;
}

TL;DR: Can I align one of three elements at the very right without floats and / or additional html elements?

Community
  • 1
  • 1
Alex
  • 799
  • 5
  • 15

1 Answers1

1

You can use Flexbox for this.

Set display:flex on your <li> and a margin-left: auto on the .e-author.

Here's an update to your fiddle: http://jsfiddle.net/dtqkm2sk/3/

Zoe Gillenwater has a very insightful talk on CSS Flexbox which covers this and many other use cases.

Razvan Caliman
  • 4,509
  • 3
  • 21
  • 24
  • thanks, I always wanted to use flex for something but never found a use-case. Maybe because I don't really know how powerful it is – Alex Oct 01 '15 at 13:07
  • You're welcome. Here's a collection of common use cases for CSS Flexbox: https://philipwalton.github.io/solved-by-flexbox/ – Razvan Caliman Oct 01 '15 at 13:08