- This topic is empty.
April 13, 2012 at 4:14 pm #37618JohnMotylJrParticipant
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.
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.
ThankApril 13, 2012 at 6:08 pm #101117TheDocMember
There are CSS columns, though the support for this is minimal at the moment. Could always use it and then have a JS fallback.April 14, 2012 at 12:41 pm #101166
You could use a tabled layout, I think that would work – though it is rather old fashioned.April 14, 2012 at 1:44 pm #101168wolfcry911Participant
you didn’t just suggest that…April 14, 2012 at 8:00 pm #101179
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.April 14, 2012 at 8:22 pm #101180joshuanhibbertMember
@Staggers How is using tables better than the method that is currently being used (hard coding divs as columns)?April 14, 2012 at 8:28 pm #101181
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?April 14, 2012 at 10:00 pm #101183joshuanhibbertMember
@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?May 16, 2012 at 9:29 pm #102941JohnMotylJrParticipant
Well, i ended up simply going with this…
-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.
- The forum ‘CSS’ is closed to new topics and replies.