Question

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.

Answer 1

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

​