Question

I know how to make columns with CSS.

But Can anyone tell me how do I do like shown in the pic?

The white space span the latter two columns.

Answer 1

The only solution I can image is to use two elements within the element that contains the text. Then using float:right can seem like one. If you want to position an image, or another div, above you can use position:absolute.

here an example css:

div {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
    position:relative;
    width:800px;
}

.whitearea {
    width:250px;
    height:200px;
    float:right;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
     .webkit {height:350px;}
}
img {position:absolute;right:0}

Demo: http://jsfiddle.net/NRFT3/4/

In firefox the result is as excepted, but chrome breaks it. I added a hack that make the height bigger, this improve it but doesn’t make it the same as firefox. Maybe there are some additional tricks that can give you the same result in both browsers.