Multiple inline divs that exceed the container width

Question

I can't figure out how to keep multiple divs inline if their width exceeds container width.If the width of all divs is about 1000 px and the container's width is 500 , i want the divs to be overlapped by container , and a horizontal scroll bar to show up.

#container {
  overflow: hidden;
  background: red;
  width: 500px;
  height: 500px;
}
#container>div {
  border: 1px solid #000;
  width: 30%;
  height: 100px;
  margin: 10px;
  float: left;
}

<div id="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
  <br style="clear: both;">
</div>

Fiddle: Click

Stickers · Accepted Answer · 2016-03-25T13:39:50.170

7

Don't use float, use inline block with container set to nowrap for white space, and then add overflow: auto; to the container to trigger the scrollbar as needed.

jsFiddle

#container{
  white-space: nowrap;
  overflow: auto;
}
#container>div{
  display: inline-block;
}

edited Mar 25 '16 at 13:39

answered Mar 25 '16 at 13:34

Stickers

75,527
23
147
186

2

@PetruLebada Glad to hear that, you might be seeing some extra whitespace between the inline blocks, see [this post](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) for more. – Stickers Mar 25 '16 at 13:45

score 1 · Answer 2 · answered Mar 25 '16 at 13:37

Add some CSS

#container {
    background: red none repeat scroll 0 0;
    height: 200px;
    overflow: auto;
    white-space: nowrap;
    width: 500px;
}

#container > div {
    border: 1px solid #000;
    display: inline-block;
    height: 100px;
    margin: 10px;
    width: 30%;
}

http://jsfiddle.net/WGCyu/1325/

score 1 · Answer 3 · answered Mar 25 '16 at 13:38

As Pangloss says, don't use float, but display them inline. And use overflow-x:scroll

#container {
  overflow: hidden;
  background: red;
  width: 500px;
  height: 500px;
  white-space: nowrap;
  overflow-x:scroll
}
#container>div {
  border: 1px solid #000;
  width: 30%;
  height: 100px;
  margin: 10px;
  display: inline-block;
}

<div id="container">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
  <div class="fourth"></div>
  <br style="clear: both;">
</div>

Multiple inline divs that exceed the container width

3 Answers3