The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] float right not working correct

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #187061

    On my drop down menu I am having issue with my span in my li a.

    It’s floating right but pushed down. I can not seem to get them in the same line as the text but having the span on the right side.

    The drop down button is named Notices

    Codepen Example here


    Are you referring to the number after “Pending Approval”? Give the UL a min-width of 170 or more (currently its 160, which is not enough) and that should help.


    It’s because you are floating it right…it’s no longer inline so it’s sitting a the top of the block….which is what you have,in effect, told it to do.

    The block height, in the absence of any other factors is probably c.1.2em…the line-height

    If you add that to the span it’s looks right.

    Codepen Link

    Personally, I would probably gone the absolute position route on the span and that would enable me to position it correctly and use transform:translate to keep it there regardless of the parent height. It’s an option.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.