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>
See Question&Answers more detail:os