CODEWITHSUNDEEP
htmlcss
abhinab rout
abhinab rout

Reputation: 11

div overflow x scroll not working

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.

Upvotes: 1

Views: 158

Answers (3)

Gautam Naik
Gautam Naik

Reputation: 9358

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>

Upvotes: 3

Hanif
Hanif

Reputation: 3795

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>

Upvotes: 1

MEnf
MEnf

Reputation: 1512

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.

Upvotes: 0

Related Questions