Petru Lebada Petru Lebada - 8 months ago 32
HTML Question

Multiple inline divs that exceed the container width

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;">

Fiddle: Click


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.


  white-space: nowrap;
  overflow: auto;
  display: inline-block;