CSS multi-column layout with column gap not changing on window resize

Question

I am trying to make a multi-column layout where each column is filled with images. There must be horizontal scroll for the container of the columns, but the column gap must not change on window resize, and the last column must be able to be shown clipped on the one side.

The coloumn height depends on the parent container and when the window height is changed, the images must be reаrranged in order to fill the column with whole images (an image should not be clipped horizontally).

img {
    height: 70px;
    width: 100px;
}

.container
{ 
    height:400px; 
    overflow-x: scroll; 
    overflow-y: hidden;
    -webkit-column-width: 100px;
    column-width: 200px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
}​

Here is a jsfiddle of what I currently have: http://jsfiddle.net/9dL2F/1/

Do you have any ideas how this can be done?

Answer 1

This is tricky. The container's entire width is divided into columns, so you can't have both a fixed column-width and column-gap. As the container's width changes, the browser wants to fill the container. See Fixed gap between CSS columns .

You could manage the width of .container : (see jsfiddle )

@media (min-width: 480px) { .container { width: 480px; } }
@media (max-width: 480px) and (min-width: 360px) { .container { width: 360px; } }

...but that's a lot of queries to manage!

Does vertically-ordered images matter? If rows are fine, you could abandon CSS3 columns:

img { display: inline-block; width: 100px; height: 70px; margin-right: 20px;}

Similarly, you could float:

img { float: left; width: 100px; height: 70px; margin-right: 20px;}

I haven't used them, and there is no IE support yet, but you could try CSS3 Flexboxes .

None of these are pretty, but I don't know of a beautiful solution...maybe CSS4 will save us?

Answer 2

Mr.Anson says right. I should manage other columns:

2 left-columns in fixed position, 1 right-column in fixed position and content (or, container is auto-resized depends on the browser windows, as follows:

.in-content{
position:absolute;
height:auto;
color:#2d2d2d;
float:left;
left:280px;
top:33px;
bottom:auto;
right:14%;
padding:0px 10px 39px 0px;
text-align:justify;
text-decoration:none;
text-transform:none;
z-index:-33;
overflow:auto;
}
@media (min-width:27%) {.in-content{width:40%;}}
@media (max-width:40%) and (min-width:27%) {.in-content{width:27%;}}

That's all ^_^ Thanks.