Div floating side by side with overflow?

Question

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

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

I want to use a class, so 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 this?!: P

Hooray!!

Answer 1

Are you after something like this ? This uses the second div inside your shell: the shell itself has a fixed width, and overflow-x 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 example here

Answer 3

Set the div wrapper to overflow: automatically to scroll, automatic width to resize (although you need to set the absolute value for the correct operation. I suppose to remember to set the parent position relative to the exact vertex: x and left: x in the sub div) , then float: leave the class .post.

Answer 4

As I understand it, you want your messages to scroll horizontally and sit side by side.

To do this, you need to add an additional shell, for example:

 <div id="wrapper"> <div id="contentWrapper"> <div class='post'>Post 1</div> <div class='post'>Post 2</div> <div class='post'>Post 3</div> <div class='post'>Post 4</div> <div class='post'>Post 5</div> <div class='post'>Post 6</div> <div class='post'>Post 7</div> <div class='post'>Post 8</div> </div> 

Here's the css to achieve the desired effect:

 #wrapper { width:400px; height:200px; overflow: auto; } #contentWrapper { float: left; margin-right: -30000px; } .post { width:100px; height:100px; display:inline-block; } 

A working example can be found here: http://jsfiddle.net/QNXmk/1/

Answer 5

I would like to add that you will not know the total width of the content container. The only solution so that the total width is based on the sum of the total width of your posts is using javascript.

Here is an example of a small script that will do this:

 /* adjust the size (width) of the posts container * this depends on all its posts widths */ function setWrapper(){ var finalW = 0; itemsWrapper = $(".posts-container"); itemsWrapper.find('.post').each(function(i){ var $post = $(this); finalW+=$post.width(); }); itemsWrapper.css('width',finalW+'px'); console.log("Your total width is: "+finalW); } setWrapper(); 

In doing so, you will set your message column to the correct size without passing it explicitly to css.