CODEWITHSUNDEEP
htmlcss
Bhavik Hirani
Bhavik Hirani

Reputation: 2016

Float with overflow scroll in css

how to set overflow-x scroll with float left,if set float left to sub div, can't scroll because sub div set within screen.and can't set width to parent div because sub div are dynamic.

.parent div{
    overflow-x:scroll;
    display:Block;
}
.sub div{
    float:left;
}

Upvotes: 2

Views: 3667

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Try to

.parent {
  overflow-x: scroll;
  display: Block;
  white-space: nowrap;
}

.parent .sub {
  /*float:left;*/
  display: inline-block;
  margin-right: 10px;
  border: 1px solid red;
}
<div class="parent">
  <div class="sub">testing</div>
  <div class="sub">testing testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
  <div class="sub">testing</div>
</div>

Upvotes: 3

Related Questions