Overflow horizontally not working when using float

Question

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.

stackoverflow.com/questions/22499187/…

Richa
– Richa

2014-04-03 06:06:06 +00:00
Commented Apr 3, 2014 at 6:06 — Richa
– Richa, Commented Apr 3, 2014 at 6:06

emn178 · Accepted Answer · 2014-04-03 06:24:26Z

2

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/

edited Apr 3, 2014 at 6:24

answered Apr 3, 2014 at 6:13

emn178

1,5028 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Overflow horizontally not working when using float

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related