How to lay divs horizontally without overflowing to new line?

css, html

Solution

You simply need something to wrap your content with the CSS property `overflow-x: scroll;`.

**Important: This is a CSS3 feature and some browsers may not support `overflox-x`. Therefore, I highly suggest you read the following: http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-without-guilt/.

Preview: http://jsfiddle.net/WXFJU/

HTML

<div id="container">
  <div id="sidebar">Sidebar</div>
  <div class="overflow-x">
      <div id="content">
        <p class="box">Box 1</p>
        <p class="box">Box 2</p>
        <p class="box">Box 3</p>
      </div>
  </div>
  <div style="clear: both;"></div>
</div>​​​​​

CSS

* {
    margin: 0px;
    padding: 0px;
}

#container {
    width: 100%;
    background: yellow;
}

#sidebar {
    float: left;
    background: red;
}

#content {
    float: left;
    white-space: nowrap;
    background: green;
}

.box {
    width: 200px;
    height: 250px;
    background: blue;
    margin: 10px;
    float: left;
}

.overflow-x {
    overflow-x: scroll;
    display: block;
}

​

Problem

I have a left floating div which serves as a sidebar (red). Next to it, there is another div that stores the page content (green). The elements inside the content div are left floating (blue). I want to be able to scroll the boxes horizontally when the browser width is too small to accommodate them; for example if there are a lot of boxes. Instead, the content div moves below the sidebar div and I am scrolling the whole page. Here is the page layout when the browser window is wide enough: Here is the HTML: ``` <div id="container"> <div id="sidebar">Sidebar</div> <div id="content"> <p class="box">Box 1</p> <p class="box">Box 2</p> <p class="box">Box 3</p> </div> <div style="clear: both;"></div> </div> ``` And here is the CSS: ``` * { margin: 0px; padding: 0px; } #container { background: yellow; } #sidebar { float: left; background: red; } #content { float: left; white-space: nowrap; background: green; } .box { width: 200px; height: 250px; background: blue; margin: 10px; float: left; } ``` Please help me understand what am I doing wrong. Thank you.

Original source