CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3overflow
Han Che
Han Che

Reputation: 8519

CSS divs in one row with overflow-x scroll

I want to have a list with fixed height and inside items in one row. If the amount of items exceed the width, I want an overflow-x scroll so the items shouldn't be pushed to next row.

So far i've played around with inline-block for ul/li and float left for divs but they all get pushed to the next row..

Thanks for your help!

Upvotes: 2

Views: 9484

Answers (2)

Nelson Amaya
Nelson Amaya

Reputation: 66

Try this:

.container {
  overflow: auto;
  white-space:nowrap;
  width: 500px;
}
.item {
  padding: 10px;
  border: 1px solid red;
  display: inline-block;
  vertical-align:top;
  margin-right:20px;
  white-space:normal;
}

Working example: https://jsfiddle.net/3dsign/gw35yq9p/

Upvotes: 4

Aris Constantinou
Aris Constantinou

Reputation: 188

Instead of using display:inline-block and floatings ,try learning Flexbox which its much easier and has incredible features :Flexbox Tutorial

So if you want, use this:

.container {
  overflow: auto;
  display:flex;
  justify-content:space-around;
}
.item {
  padding: 10px;
  border: 1px solid red;
  vertical-align:top;
  white-space:normal;
}

Upvotes: 1

Related Questions