Forums

JohnMotylJr

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: (http://goo.gl/sYcII) 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.

Thank

TheDoc

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

Staggers

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

wolfcry911

you didn't just suggest that...

Staggers

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.

joshuanhibbert

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

Staggers

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?

joshuanhibbert

@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?

JohnMotylJr

Well, i ended up simply going with this...


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

	-moz-column-gap:20px; /* Firefox */
	-webkit-column-gap:20px; /* Safari and Chrome */
	column-gap:20px;
	
	-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.

treehouse : what would you like to learn today?

Forums

[Solved] Is this 'print design' possible with CSS?