Why can't I float multiple posts next to each other when using -moz/webkit column width CSS?

On my blog that I am sett开发者_如何转开发ing up, http://beerwhich.com/blogFun/index.html, I am using the column-width property to create a horizontal reading experience.

The problem: I cannot seem to get multiple posts to display horizontally next to each other despite floating both posts.

Any advice/knowledge would be greatly appreciated!

@Sean; there is no problem with column-width property just give width to your .container div(parent div) which make space for child divs

For example:

.container {
    height: 100%;
    overflow: hidden;
    padding: 20px 0 0 100px;
    width: 4270px;
}

EDIT:

As you said that you don't want to specify width to your div's. So, may be you can do this

CSS:

.container {
    white-space: nowrap;
}
.post {
    display: inline-block;
    padding: 110px 0 0;
    white-space: normal;
}
.post .text {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -moz-column-width: 320px;
    height: 500px;
}
.column {
    display: inline-block;
}

check is example http://jsbin.com/oruyir/18 give column-count: property according to your text.

You can use column-count and column-gap instead and get a better result, mixing it in with box-flex you can achieve this design quite nicely.

Here's a little quick and dirty demo

http://jsfiddle.net/andresilich/SvVGq/

Check out http://css-tricks.com/166-how-to-create-a-horizontally-scrolling-site/ for a tutorial on how to make a horizontal layout work.

If you didn't need it to work in IE8, you could try using CSS3's Flexible Box module and set box-orient: horizontal on your post items instead of floating them.