css-multicolumn-layout

I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox. I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though. I was checking the site on Safari and I noticed that my menu bar, which uses an unordered list with column-count (both -moz- and -webkit- with the same value), and noticed that there is a difference between the filling of the columns. Chrome seems to fill the columns evenly while Safari just fills the columns one by one. The images below illustrate this.

I've stumbled across a really great project (CSS3 PIE) today that makes it possible to use CSS3 rounded corners, shadows and gradients even in IE6, IE7 and IE8 using CSS settings and usual CSS3 notation. It uses *.htc file that does the trickery and makes it really transparent for developers (as in set it and forget it - no additional script calls when creating new pages or changing existing ones (provided you don't change CSS)). I wonder if there's anything similar for multi column layout that can be used. Floating is not an option because content is not laid out top to bottom - left to right

Here is my code: .column { column-count: 4; column-gap: 10px; -moz-column-count: 4; -moz-column-gap: 10px; -webkit-column-count: 4; -webkit-column-gap: 10px; } <div class="column"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> <div class="inner">12</div> </div> The result is: 1 4 7 10 2 5 8 11 3 6 9 12 What I want is: 1 2 3 4 5 6 7 8 9 10 11 12

I'm having an issue with Chrome when I use the column-count property. I have a div where inside it I will have some items so I set column-count: 3; When I have 3 items or more it works well, but when I have only two they are not shown in the same row but in the same column. This happens only on Chrome. code example: .userinfo-content .grid-view.author-profile-tabs { .column-count(3); .column-gap(30); .article { position:relative; display: inline-block; margin-bottom: 40px; width: 100%; line-height: 1.3; } } Based on how your markup looks like, the break-inside: avoid-column; should fix that,