html and css - aligning row & columns of articles without using table

Question

I've got a series of links to press articles I am publishing on a client's site (basic html and css, no php allowed). The client would like the articles neatly lined up in nice rows and columns. I'm trying not to use a table, but cannot seem to get things to line up correctly. Of course the article titles are different lengths which throws everything off.

I've got a jsfiddle which demonstrates what I am trying to do: http://jsfiddle.net/ktpmm5/ug5s4Leq/5/

I would also like to do this without using a background image, but I can do that if need be (it might look fancier that way). The client also wants this to be responsive, and be viewed on the usual smartphones, tablets, etc.

Can anyone point me in the right direction?  Thanks-

I've personally came to the conclusion that using a simple table beats fighting CSS and browser support for days... — sebnukem, Dec 11 '14 at 22:39
possible duplicate of [Replace HTML Table with Divs](http://stackoverflow.com/questions/702181/replace-html-table-with-divs) — ShufflerShark, Dec 12 '14 at 11:40

score 1 · Accepted Answer · answered Dec 11 '14 at 22:36

1

I would use the new CSS3 flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

but before you start, check if it is usable in the browsers you're developing for: http://caniuse.com/#search=flexbox

answered Dec 11 '14 at 22:36

Alexis Peters

1,583
1
10
17

Thanks - I'll use all responses - tables short term and Css3 flexbox longer term. Appreciate the responses. – user1309220 Dec 12 '14 at 16:35

html and css - aligning row & columns of articles without using table

1 Answers1