Prevent wrapping of elements inside a div
<p>I have a simple list of check boxes inside a div. I wanted to give the div a fixed width but I do not want the labels of these check boxes to go down 1 line. I also want to retain the scroll bars so the user can see the hidden parts if he wants to. Some say use <code>float:left;</code> or <code>overflow:hidden;</code> but this does not seem to work. I keep getting the list with the labels going down the line instead of being hidden. I thought <code>overflow:hidden;</code> would fix this but it instead expanded the width of my div to show the rest of the labels.</p>

<pre><code>&lt;div style='width:80;height:200;overflow:scroll;'&gt;
&lt;input type='checkbox' value='All'&gt;All&lt;br&gt;
&lt;input type='checkbox' value='San Francisco'&gt;San Francisco&lt;br&gt;
&lt;input type='checkbox' value='North Carolina'&gt;North Carolina&lt;br&gt;
&lt;input type='checkbox' value='New York'&gt;New York&lt;br&gt;
&lt;/div&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/rQNZH.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/rQNZH.jpg" alt="enter image description here"></a></p>

<p>Question is how can I give the div a fixed width but I do not want the labels of these check boxes to go down 1 line and I want to retain the scroll bars?</p>