div overflow x scroll not working

Question

I want to create div with overflow effect. here is my code

<div style="width:100%;clear:both;overflow-x:auto">
   <div style="width:50%; float:left; background:#ccc;height:200px"></div>
   <div style="width:50%; float:left; background:#333;height:200px"></div>
   <div style="width:50%; float:left; background:#cc90fc;height:200px"></div>
   <div style="width:50%; float:left; background:#000;height:200px"></div>
</div>

i want these div don't come below while overflow, the container div will have a scroll bar, any suggestion.

Gautam Naik · Accepted Answer · 2018-05-03 18:45:49Z

3

You need to give whitespace:nowrap to parent container, and display:inline-block to children elements

When whitespace:nowrap is given, the content inside doesn't go to the next line.

<div style="width:100%;overflow-x:auto;white-space: nowrap; font-size:0">
  <div style="width:50%; display:inline-block;  background:#ccc;height:200px; font-size:initial"></div>
  <div style="width:50%; display:inline-block;  background:#333;height:200px; font-size:initial"></div>
  <div style="width:50%; display:inline-block;  background:#cc90fc;height:200px; font-size:initial"></div>
  <div style="width:50%; display:inline-block;  background:#000;height:200px; font-size:initial"></div>
</div>

edited May 3, 2018 at 18:45

answered May 3, 2018 at 18:03

Gautam Naik

9,4643 gold badges31 silver badges45 bronze badges

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

Comments

Hanif · Accepted Answer · 2018-05-03 18:35:06Z

1

To avoid gap between display:inline-block element you should use font-size:0; in container elements. Also add vertical-align to keep the child element in same line. See below:

<div style="width:100%;overflow-x:auto; white-space: nowrap; font-size: 0;">
  <div style="width:50%; display:inline-block; background:#ccc; height:200px; font-size: 12px; vertical-align: top;">afadsf afdafdsaf</div>
  <div style="width:50%; display:inline-block; background:#333; height:200px; font-size: 12px;  vertical-align: top;"></div>
  <div style="width:50%; display:inline-block; background:#cc90fc; height:200px; font-size: 12px;  vertical-align: top;"></div>
  <div style="width:50%; display:inline-block; background:#000; height:200px; font-size: 12px; vertical-align: top;"></div>
</div>

edited May 3, 2018 at 18:35

answered May 3, 2018 at 18:17

Hanif

3,8451 gold badge15 silver badges20 bronze badges

2 Comments

user7148391 Over a year ago

I can still see the gap in between, i guess it's not practical to be a fixed size.

Hanif Over a year ago

@ZohirSalakCeNa I updated my answer. font-size: 0 is key issue to remove white space in between the child elements.

MEnf · Accepted Answer · 2018-05-03 18:02:29Z

0

I'm not 100% sure what you're asking, but if you don't want the div to show when it overflows vertically (up and down) instead of horizontally (left to right) you should be using the overflow-y style instead of the overflow-x style.

Change style="width:100%;clear:both;overflow-x:auto to style="width:100%;clear:both;overflow-y:auto in your style attribute.

answered May 3, 2018 at 18:02

MEnf

1,5321 gold badge12 silver badges20 bronze badges

1 Comment

MEnf Over a year ago

That being said, you also need to define the height of the parent div. (I'm assuming there isn't an element wrapping it that defines the size)

Collectives™ on Stack Overflow

div overflow x scroll not working

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related