Question

I have a ul of inline elements (checkbox and span)

For some rows (li’s) I need two columns
I tried with float but that brakes the vertical alignment between the two columns
, but(!) when I created a fiddle for this question it works with the above technique! :/

I even cut and pasted our sites complete style into fiddle but I cant reproduce the problem

http://jsfiddle.net/Q9g2C/

As you can see Bar1 and Some info are vertically aligned.

If I disable font-size: 0.85em; from the body it aligns also on my site, doesn’t matter if I use em or px if I have a size defined in the CSS it will not align. Can you guys tell me whats wrong?

edit: My question is what could cause the span and the input to not align in my real world site (I was not able to reproduce the alignment problem in the fiddle above)

Answer 1

Must simply add [this is in the normalize.css file of fiddle]

input{margin:0; padding:0;}

The checkbox input must have some kind of offset that is showing on anything floated next to it.