Question

I have searched this site looking for the answer and found similar things, but nothing that stood out as the answer, probably due to my lack of experience with this. I am using the JQuery slider below a table and the slider is required to be in its own div. I am trying to get the ‘min’ label to show to the left of the slider and the ‘max’ to the right, all 3 elements on the same line. As the code shows below, it places each element on its own line and I do understand why that is, too.

However, I have tried floating left, placing each in its own div, and placing all 3 in one div. I have tried a combination of those as well. I can’t get it and each experiment I try results in a look that makes no logical sense to me.

What am I missing? Thanks for any help 🙂

<label id="min">0</label>
<div id="slider" style="width:450px"></div>
<label id="max">200</label>

Answer 1

You can do this using CSS floats.

<style>
    #mySlider label, #mySlider div {float: left;)
</style>    
<div id="mySlider">
    <label id="min">0</label> 
    <div id="slider" style="width:450px">(slider)</div> 
    <label id="max">200</label> 
</div>    
​

JS Fiddle example