How to not use column-count



  • If you've got a monitor that's over ~1100px wide (and a Gecko-based browser), this page breaks up into two columns, requiring you to scroll down, then back up to read the top of the next column. And this guy is supposed to be giving style tips.



  • I didn't care enough to take a screen shot, but his Vertically Centered bit is not particularly centered.  It's more... exactly where it would be if he hadn't done anything.



  • @HighlyPaidContractor said:

    I didn't care enough to take a screen shot, but his Vertically Centered bit is not particularly centered.

    Are you using IE6?



  •  Dual 1680 x 1050 monitors in portrait mode.  Spread FF all the way across and it ended up in three columns.  Way to go!



  • @Schlagwerk said:

    this page breaks up into two columns

    The browser is doing what it is told, using CSS3 multicolumn (in browsers that support it):

    @media all and (min-width: 68em) { /* 2 columns if window is wide. /
    body { column-count: 2; -moz-column-count: 2; }
    ...
    @media all and (min-width: 92em) { /
    3 columns if window is very wide. /

    @Schlagwerk said:
    And this guy is supposed to be giving style tips.
    Wow. According to the footer, "this guy" is Bert Bos - one of the two inventors of CSS. He's about as qualified as anyone to show how to achieve certain effects with CSS. His taste in style may not be so good (I don't particularly like the columns either), but his taste in style has nothing to do with his ability to achieve a desired effect with CSS.@derula said:
    @HighlyPaidContractor said:
    I didn't care enough to take a screen shot, but his Vertically Centered bit is not particularly centered.
    Are you using IE6?
    Or IE 7. It relies on display:table-
    which IE only started supporting in version 8. Most other browsers have supported it for a lot longer.



  • @nonpartisan said:

     Dual 1680 x 1050 monitors in portrait mode.  Spread FF all the way across and it ended up in three columns.  Way to go!

    Same monitor size in Chrome, and it's a single column no matter how wide I make the window. So... maybe it's just FF?

    Edit: Ok I de-lazy-ied myself, and tried in IE8, FF3.latest, Chrome9. IE8 and Chrome 9 render everything correctly. Firefox creates new columns as the window gets wider, causing an unreadable mess. IE8 for some reason has a different background color.

    @TarquinWJ said:

    Filed under: Might help to work out who you are talking about before insulting them

    Actually knowing who it is makes it worse, since I hate the W3C and CSS's designers with a passion.



  • @blakeyrat said:

    IE8 and Chrome 9 render everything correctly. Firefox creates new columns as the window gets wider
    @TarquinWJ said:
    using CSS3 multicolumn (in browsers that support it)



  • @TarquinWJ said:

    @blakeyrat said:
    IE8 and Chrome 9 render everything correctly. Firefox creates new columns as the window gets wider
    @TarquinWJ said:
    using CSS3 multicolumn (in browsers that support it)

    So the demo is supposed to become an unreadable mess? Is that what you're telling me with your quoting?



  • @derula said:

    @HighlyPaidContractor said:
    I didn't care enough to take a screen shot, but his Vertically Centered bit is not particularly centered.
    Are you using IE6?

    IE7 - don't get me started on company enforced browser restrictions.

    Also don't get me started on this pudding? I'm eating...



  • @blakeyrat said:

    So the demo is supposed to become an unreadable mess?
    Yes. The layout is supposed to wrap into columns (when supported by the browser) if the window gets wide enough. It's not a very nice layout. Of course, like I said before, it doesn't make the information on the page (talking about how to achieve various effects with CSS) any less accurate. Given how often people ask how to achieve those effects (centring is not exactly straightforward), it's nice to have a series of tips collected like that which Web developers can use as a quick reference.



  • @TarquinWJ said:

    @blakeyrat said:
    So the demo is supposed to become an unreadable mess?
    Yes. The layout is supposed to wrap into columns (when supported by the browser) if the window gets wide enough. It's not a very nice layout. Of course, like I said before, it doesn't make the information on the page (talking about how to achieve various effects with CSS) any less accurate. Given how often people ask how to achieve those effects (centring is not exactly straightforward), it's nice to have a series of tips collected like that which Web developers can use as a quick reference.

    Wow what a great demo. "A lot of people call in and ask, they ask, 'how do I make my website look more like shit?' Well today on the CSS Hour I'm going to show you! Install these three lines of CSS and you can guarantee you'll be hemorrhaging readers faster than ever before! Your website has never been this unprofitable and unpopular before!"

    So I guess the Real WTF is that we were supposed to somehow know that the shitty-looking version was "correct" while the readable version was "incorrect."


  • 🚽 Regular

    @blakeyrat said:

    So I guess the Real WTF is that we were supposed to somehow know that the shitty-looking version was "correct" while the readable version was "incorrect."

    Who knows? Maybe it's a passive-agressive approach to discourage the style property. The way he did it doesn't only make it look shitty, it looks broken. On my screen, there is a heading on the bottom of the first column and the rest of the box is continued on the next column.

    One thing is for sure, though. This multi-column technique is especially shitty when you have a vertical scrollbar. It's completely counter-intuitive to scroll to the bottom of one column then have to scroll back to the top to continue. It works in print, but not on the web.



  • IE8 and Chrome generates a single column.

    What I like is the title "web style Sheets CSS tips and tricks" is centered in the browser. Yet the column is left justified.
    I am guessing this is NOT what was intended.

    Yes the title is centered, but it shouldn't be.



  • Did anybody check out the alternate styles that the page offers? :)



  •  @ender said:

    Did anybody check out the alternate styles that the page offers? :)

    I thought this was what it looked like when I was doing it wrong.  Shows what I know...


  •  I do think it's really nice how the side-bar drops to the bottom if the window is narrow enough. 



  • Wait, I just tried the shit in FF4 Beta 11 and my 1680+1280 screen layout and it didn't even wrap into two columns. What am I doing wrong?



    Edit: Holy crab, it redirected me to http://www.ich-lerne-css.de/Style/Examples/007/center.html!! WTH? (im-learning-css.de)



  • @Schlagwerk said:

    If you've got a monitor that's over ~1100px wide (and a Gecko-based browser), this page breaks up into two columns, requiring you to scroll down, then back up to read the top of the next column. And this guy is supposed to be giving style tips.

    Works fine in Chrome 9 and Firefox 3.5 on my 1920x1080 laptop. But that actually is a pretty need effect to achieve in CSS.

    It also is the standard in printed media like newspapers or magazines. Maybe you should do more analog reading?



  • @derula said:

    Edit: Holy crab, it redirected me to http://www.ich-lerne-css.de/Style/Examples/007/center.html!! WTH? (im-learning-css.de)

    It similarly redirected me to a dutch translation, it seems to redirect based on your browsers accepted-languages.



  • @dtech said:

    @derula said:
    Edit: Holy crab, it redirected me to http://www.ich-lerne-css.de/Style/Examples/007/center.html!! WTH? (im-learning-css.de)

    It similarly redirected me to a dutch translation, it seems to redirect based on your browsers accepted-languages.

    Well I'm totally fine with being redirected to a translated version, but I am totally NOT FINE WITH being redirected to an ominous "ich-lerne-css.de" domain while navigating the W3C page. They could have done it like the PHP manual, works perfectly fine (well, except that I have to edit the url every time I want to pass it on to someone who doesn't know my language...). Or maybe they should just send the right content without redirecting me? Or is there anything wrong with giving localized content without altering the URL? Maybe an SEO thing?



  • @dtech said:

    need
     

    neat.

    Cool.

    Phat.

    Lukewarm.

    @dtech said:

    It also is the standard in printed media like newspapers or magazines. Maybe you should do more analog reading?

    Desktop monitors are not pieces of paper. They have different usability features. Do not mix 'em up.

    If you're going to use columns of text, then given the current behaviour you must be sure that the total content fits on 1 screen. Since everybody has a different monitor and different effective canvas size, so it's impossible to guarantee that. Conclusion: you should bever use CSS columns.

    This problem goes away if the browser not only divides the text into columns, but also ensures the text is vertically paged with a gutter, so that users don't have to do the vertical zizag scroll described earlier, and can just page-down through the text. This is problematic if the content is very irregular, unlike a book of text, but very much like most online textual content.

    So until browsers behave properly, CSS columns are useless for big wads of text.

    I'd test in Chrome, but my install seems broken since we moved the company. Later, prehaps.


Log in to reply