Question

Any css tricks for getting text of any size to appear on the baseline for children inside one element that has float:left and another that has float:right?

Check out the jsfiddle link below to see what I’m talking about. Notice how the word “One” has a larger font so it bumps all of it’s siblings in the float:left down, but it does not influence the spans in the float:right div.

http://jsfiddle.net/QeRhU/

I’d like for them all to appear on the same baseline. I’m hoping for a solution that still uses float:left; float:right; because I still want the liquid behavior that it gives when a user scales the page.

Answer 1

Try this, it’s not the clean solution, but rather a workaround that could get the job done if you don’t find a cleaner css solution.