Prevent wrapping of elements inside a div

Question

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 float:left; or overflow:hidden; 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 overflow:hidden; would fix this but it instead expanded the width of my div to show the rest of the labels.

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

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?

Answer 1

not sure if this is what you want but try so:

#list{
  width:80px;
  height:200px;
  overflow-y:scroll;
  white-space:nowrap;
}

<div id="list">
  <input type='checkbox' value='All'>All
  <br>
  <input type='checkbox' value='San Francisco'>San Francisco
  <br>
  <input type='checkbox' value='North Carolina'>North Carolina
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
  <input type='checkbox' value='New York'>New York
  <br>
</div>