The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Is this ‘print design’ possible with CSS?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #37618

    Hello all,

    Lately, I have been super inspired by many different print designs from magazines, books, posters, etc. One such design i had noticed is very simple, clean, and something similar would work perfect in the project i have going right now.

    Reference: ( Just an image i scanned from one of my old golf magazines.

    My main question is, is it possible to achieve the columned effect with some sort of word wrap? The content i will be adding is not dynamic, only static content that i will add myself. I have created this effect by hard coding the text in different set columns but it is not symantec or clean code.

    An option that i had brain stormed would be to use Javascript to set a max char length and than trim it into the next column and so on, but i would like to achieve this with just CSS and a nice flowing word wrap effect.

    I will be starting this in a JSFiddle so i can possibly show my progress when i come up with a solution.

    Any help would be greatly appreciated.



    There are CSS columns, though the support for this is minimal at the moment. Could always use it and then have a JS fallback.


    You could use a tabled layout, I think that would work – though it is rather old fashioned.


    you didn’t just suggest that…


    I did, I hate tables as much as the next guy, but if you want something which will run on the most ancient of ancient machines then they’re what you go for.

    I suggested it as a contrast to TheDoc’s suggestion, which is something which may need a fallback.


    @Staggers How is using tables better than the method that is currently being used (hard coding divs as columns)?


    I didn’t say it was better, I just put it out there as an alternative.

    I would go for hard coding divs as columns, but tables is also an option if you want to be lazy.

    Nothing wrong with a bit of variety to choose from eh?


    @Staggers We will have to agree to disagree. I personally feel that variety isn’t all that great if the other options are terrible (such as using tables). Since when is being lazy a good excuse?


    Well, i ended up simply going with this…

    .content {
    -moz-column-count:4; /* Firefox */
    -webkit-column-count:4; /* Safari and Chrome */

    -moz-column-gap:20px; /* Firefox */
    -webkit-column-gap:20px; /* Safari and Chrome */

    -moz-column-rule:1px dotted black; /* Firefox */
    -webkit-column-rule:1px dotted black; /* Safari and Chrome */
    column-rule:1px dotted black;

    I decided to go with the css because i wasn’t worried about the IE support. If i had to i would probably hard code text in the divs and just test with different browsers. I may go ahead and do that.

    And about tables, i would probably only use them for displaying data.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.