Text label next to jQuery UI slider

Question

Inside the parent div, I want to have a text label on the left and a slider (using jQuery UI) on the right. I want the slider to take up all the free space.

So, conceptually, what I will look at:

<div id="parentDiv" style="width:800px"> <span>Unicorn awesomeness:</span><div id="unicornSlider"></div> </div> 

But I can’t do anything easily that works on Chrome, FF3 and IE7 / 8. Is there a relatively neat solution? I will agree to make the slider a fixed width if this greatly simplifies the situation, even if it is not ideal.

Answer 1

I think it would be much harder to get your inline effect without specifying a width

Here's an example of using% width that works in the aforementioned browsers (IE7 was a bit off center, building a shortcut and slider, but it was still on the same line)

http://jsfiddle.net/pxfunc/D7b7F/

 #unicornSlider {float:right;width:80%;}