DIV Horizontal Scroll
css, html
Solution
Use `display:inline-block` instead of `float:left`, and add `white-space:nowrap;` to the container. If needed, add `white-space:normal` to the content elements. Demo
Problem
I have several HTML elements inside a div with a fix width. The sum of the width of the inner elements is greater than the width of the container. How can I make the inner elements appear inline (and showing a horizontal scroll) instead of breaking after reaching the parent's width? I could add a wrapper and assign it a min-width, but I want something that will change its size if the contents change. ``` <div id="container"> <div class="contents" id="one"></div> <div class="contents" id="two"></div> <div class="contents" id="three"></div> <div class="contents" id="four"></div> </div> #container { width: 100px; background-color: #CCC; overflow: auto; height: 100px; } .contents { width: 35px; height: 60px; float: left; } #one { background-color:#ABC; } #two { background-color:#333; } #three { background-color:#888; } #four { background-color:#AAA; } ``` http://jsfiddle.net/elohr/G5YZ6/2/ Thanks!