css - Divs side by side while only partially visible

Question

I want to have some div's side by side in a horizontal row. I want the container to only show part of the row at a time with scrolling. Currently, the div's are just in 1 column. Maybe I'm crazy, can't see why this won't work. Thanks!

See this JSFiddle: http://jsfiddle.net/42kurwtp/

HTML

    <div style="width: 300px; height: 300px; overflow:scroll;">
        <div id="blue"></div>
        <div id="red"></div>
        <div id="green"></div>
        <div id="yellow"></div>
    </div>

CSS

<style>
div {
    width: 200px;
    height: 200px;
    float: left;
}
    #blue {
        background: blue;
    }

    #red {
        background: red;
    }

    #green {
        background: green;

    }

    #yellow {
        background: yellow;
    }
</style>

Answer 1

<style> #row {
  overflow: scroll;
  width: 900px;
  height: 70px;
}
#row div {
  width: 200px;
  height: 200px;
  float: left;
}
#blue {
  background: blue;
}
#red {
  background: red;
}
#green {
  background: green;
}
#yellow {
  background: yellow;
}
</style>

<div class="row" id="row">
  <div id="blue">&nbsp;</div>
  <div id="red">&nbsp;</div>
  <div id="green">&nbsp;</div>
  <div id="yellow">&nbsp;</div>
</div>