Text label next to jQuery UI slider

Question

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

So conceptually what I'll looking at is:

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

But I can't get anything easily that works on Chrome, FF3 & IE7/8. Is there a relatively neat solution? I will settle for making the slider a fixed width if it substantially makes things easier, even though this is not ideal.

Answer 1

I think it'd be a lot trickier to get your inline effect without specifying a width

Here's an example using a % width that works in the above mentioned browsers (IE7 was a little off-center in lining up the label and slider but it was still on the same line)

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

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