How to align this span to the right of the div

Question

I have the following HTML    lt div class  title  gt       lt span gt Cumulative performance lt  span gt       lt span gt 20 02 2011 lt  span gt   lt  div gt    with this CSS    title       display  block      border-top  4px solid  a7a59b      background-color   f6e9d9      height  22px      line-height  22px      padding  4px 6px      font-size  14px      color   000      margin-bottom  13px      clear both      If you check this jsFiddle  http   jsfiddle net 8JwhZ   you can see that the Name  amp  Date are stuck together  Is there a way that I can get the date to align to the right  I ve tried float  right  on the second  lt span gt  but it screws up the style  and pushes the date outside of the enclosing div

User · Answer

You can do this without modifying the html   http   jsfiddle net 8JwhZ 1085    lt div class  title  gt   lt span gt Cumulative performance lt  span gt   lt span gt 20 02 2011 lt  span gt   lt  div gt    title span nth-of-type 1    float right    title span nth-of-type 2    float left

User · Answer

An alternative solution to floats is to use absolute positioning    title     position  relative      title span last-child     position  absolute    right  6px       must be equal to parent s right padding        See also the fiddle

User · Answer

If you can modify the HTML  http   jsfiddle net 8JwhZ 3    lt div class  title  gt     lt span class  name  gt Cumulative performance lt  span gt     lt span class  date  gt 20 02 2011 lt  span gt   lt  div gt    title  date   float right    title  name   float left

User · Answer

The solution using flexbox without justify-content  space-between    lt div class  title  gt     lt span gt Cumulative performance lt  span gt     lt span gt 20 02 2011 lt  span gt   lt  div gt    title     display  flex     span first-of-type     flex  1      When we use flex 1 on the first  lt span gt   it takes up the entire remaining space and moves the second  lt span gt  to the right  The Fiddle with this solution  https   jsfiddle net 2k1vryn7   Here https   jsfiddle net 7wvx2uLp 3  you can see the difference between two flexbox approaches  flexbox with justify-content  space-between and flexbox with flex 1 on the first  lt span gt

User · Answer

Working with floats is bit messy     This as many other  trivial  layout tricks  can be done with flexbox      div container        display  flex       justify-content  space-between         In 2017 I think this is preferred solution  over float  if you don t have to support legacy browsers  https   caniuse com  feat flexbox  Check fiddle how different float usages compares to flexbox   may include some competing answers    https   jsfiddle net b244s19k 25   If you still need to stick with float I recommended third version of course

[html] How to align this span to the right of the div?

Examples related to html

Examples related to css