CODEWITHSUNDEEP
htmlcss
asdfkjasdfjk
asdfkjasdfjk

Reputation: 3894

Overflow horizontally not working when using float

This is my sample html code

<div style="overflow-y: visible; overflow-x: scroll; width: 600px;">
  <div style="width: 230px;float:left;">Some label</div>
  <div style="width: 230px;float:left;">Some label</div>
  <div style="width: 230px;float:left;">Some label</div>
  <div style="width: 230px;float:left;">Some label</div>
  <div style="width: 230px;float:left;">Some label</div>
  <div style="width: 230px;float:left;">Some label</div>
</div>

Example here http://jsfiddle.net/jbfDU/1/

I want to show all the text in single line and scrollbar horizontally should appear. But from the example you can see the they are showing in single line but all of the text are not showing and also scrollbar is not working as expected.

Upvotes: 0

Views: 43

Answers (1)

emn178
emn178

Reputation: 1492

Use white-space: nowrap for wrapper and display: inline-block for elements

<div style="overflow-y: hidden; overflow-x: scroll; width: 600px; height: 30px;white-space: nowrap;">
  <div style="width: 230px;display:inline-block;">Some label</div>
  <div style="width: 230px;display:inline-block;">Some label</div>
  <div style="width: 230px;display:inline-block;">Some label</div>
  <div style="width: 230px;display:inline-block;">Some label</div>
  <div style="width: 230px;display:inline-block;">Some label</div>
  <div style="width: 230px;display:inline-block;">Some label</div>
</div>

http://jsfiddle.net/jbfDU/4/

Upvotes: 2

Related Questions