Div floating side by side with overflow?

Question

I have a div wrapper, and inside it, i want divs to be side by side. I want the wrapper side to be fixed, so that as more divs are added, they overflow horizontally!!

Also, I want the wrapper width to be fixed! So I do want the posts inside to overflow inside the wrapper!

I want to use a class, so that I have something like

 <div id="wrapper">
      <div class='post'>Post 1</div>
      <div class='post'>Post 2</div>
      <div class='post'>Post 3</div>
 </div>

How do I do that?! :p

Cheers!!

Answer 1

Are you after something like this? That makes use of a second div inside your wrapper: the wrapper itself has a fixed width, and overflow-x set to scroll:

#wrapper {
    margin: 20px;
    padding: 20px;
    width: 300px;
    overflow-x: auto;
    background: #eee;
    border: 1px solid #333;
}

#wrapper>div {
    width: 600px;
}

.post {
    background: #fff;
    border: 1px solid #e4e4e4;
    float:left;
    margin-left: 20px;
    padding: 40px;
}

.post:first-of-type {
    margin-left: 0;
}

Answer 2

#wrapper {
display: block;
width: 600px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
background: #900;
white-space: nowrap;}

.post {
display: inline-block;
width: 250px;
height: 100px;
background: #c00;
margin: 0 5px; }

Jfiddle sample here