jay jay - 5 months ago 10
CSS Question

Prevent wrapping of elements inside a div

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>


enter image description here

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

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>

Comments