[Solved] float right not working correct

[wolfgang1983]

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

[Senff]

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.

[Paulie_D]

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.

[Author]

Posts