CODEWITHSUNDEEP
htmlcssoverflowfloating
Eclipse
Eclipse

Reputation: 404

CSS | Make div float to right and add scrollbar to parent

I have a parent Div container with 5 divs inside it. The parent div is 960px wide and 320px in height. The inner elements are floating left and have a set width.

There is not enough width/space for 5 items to fit inside the 960 wide parent div so naturally it makes the last div float to the bottom.

Is there a way to make it slide to the right and add a scroll bar to scroll horizontally?

http://puu.sh/qiBKI/3f1d4c944a.png

Upvotes: 0

Views: 1532

Answers (1)

MattDiMu
MattDiMu

Reputation: 5003

You could combine white-space: nowrap and display: inline-block to prevent the elements from being wrapped. Add overflow: scroll an the parent get the scrollbar. Here is an example:

.parent {
  overflow: scroll;
  background-color: lightblue;
  white-space: nowrap;
 }

.some-child {
  width: 200px;
  display: inline-block;
 }
<div class="parent">
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
  <div class="some-child">Some Text</div>
</div>

.parent {
  width: 100%;
  overflow: scroll;
}

Upvotes: 1

Related Questions