Question

I am trying to set my own distances inside a div for a sequence of 3 elements:

1) a checkbox
2) an image
3) a text

I would like:

1)the checkbox to be 1 pixel distant from the left border of the
containing div + aligned vertically in the middle

2)the image to be 1 pixel distant from the checkbox + aligned
vertically in the middle

3)the text to be 1 pixel distant from the image + aligned
vertically in the middle

If I use vertical-align middle it aligns perfectly the elements but it doesn’t let me space them horizontally!

I also found good solutions for IE or for FF, but I cannot find 1 solution that does the job for all the browsers!

You can see the full code here:

http://jsfiddle.net/WNeLW/

Answer 1

See this fiddle it might help you. If i am not getting you problem then this will be helpful.

Fiddle: http://jsfiddle.net/WNeLW/1/

Demo: http://jsfiddle.net/WNeLW/1/embedded/result/

Updated Code Tested in IE6:

Fiddle: http://jsfiddle.net/WNeLW/10/

Demo: http://jsfiddle.net/WNeLW/10/embedded/result/