CODEWITHSUNDEEP
csswidthmultiple-columns
Lucas Raines
Lucas Raines

Reputation: 1315

Keep CSS3 Multicolumn Width Static

I'm trying to create a layout that would most easily be described as a horizontally scrolling pinterest.

As in, I have items that would stack up against the previous one, and instead of extending top to bottom, it goes left to right.

So far it looks like the CSS3 multicolumn property is exactly what I want. Only problem I have is that the width is flexible (despite declaring column-width). Different browser windows render different sized columns.

Currently use:

.multicol {
    -webkit-column-width: 150px;
    -webkit-column-gap: 0;
    height: 400px;
    width: auto;
}

Example of my problem (resize window to see width change): http://jsfiddle.net/pbg3r/4/

Is there a way to keep the width fixed? I just want columns of Xpx width, and as more are added, the page is extended horizontally as needed.

The w3 spec says the only way to keep it fixed is for "all length values (in horizontal text these are: ‘width’, ‘column-width’, ‘column-gap’, and ‘column-rule-width’) must be specified."

Though I'm not sure how to give the container a set width and keep the ability to continuously expend horizontally. And even when I do, it still doesn't guarantee the set width.

Any way to guarantee a width of Xpx for each column?

Thanks for any help.

Upvotes: 0

Views: 393

Answers (1)

benlevywebdesign
benlevywebdesign

Reputation: 339

A possible answer to your issue with different browsers rendering different sized columns is a simple one.

For your .multicol css styles you already set the styles for webkit browsers just like above. Since -webkit(which is a browser prefix) only works with webkit browsers, you will need to add each browser prefix to the same style in order for it to display corretly on the other browsers.

This is what you should make your style sheet look like: (you can get rid of the spaces between each browser style if you want)

.multicol {

/*webkit*/
-webkit-column-width: 150px;
-webkit-column-gap: 0;

/*moz*/
-moz-column-width: 150px;
-moz-column-gap: 0;

/*opera*/
-o-column-width: 150px;
-o-column-gap: 0;

height: 400px;
width: auto;
}

and here is an updated fiddle that displays your content correctly when viewing on webkit,firefox, or opera browser (you can add styles for Internet Explorer just use: -ms-)

You also need to add browser prefixes to any other styles you have set up in your stylesheet.

Upvotes: 2

Related Questions