Question

On my blog that I am setting 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!

Answer 1

@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.