-1

I'm working on a directory page that's pretty simple--a company logo floated to the left, a company title and description on the right. There are about 150 of these, dynamically generated with PHP/MySQL. I recently made the entire site responsive minus the directory page. Right now I'm using tables for the directory which works perfectly. Many of the listings' descriptions vary in length (and therefore height) and using a table allows for the logos to stay perfectly centered with regard to the content.

In an effort to make this page responsive, I've tried to remove the table and rely solely on divs for the directory listings. This has been HELL. Getting an image vertically centered with a variable height on the containing div doesn't seem possible.

I feel like using tables isn't a bad practice in this case, as my data is "tabular" in nature. Am I wrong to assume this, and if not, how can I make the listings table responsive? It's hard for me to fathom being able to do so without changing the HTML (to a div style layout rather than table). Any help would be much appreciated.

Tim Aych
  • 1,365
  • 4
  • 16
  • 34
  • possible duplicate of [Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – apaul May 28 '14 at 04:38

2 Answers2

2

You can make divs act like tables, I tend to stay away from tables entirely unless I am asked to code an email blast.

These will be your friends:

display:table;
display:table-cell;
vertical-align:middle;
APAD1
  • 13,509
  • 8
  • 43
  • 72
  • You can, in modern browsers, make tables act like divs too. If the data is tabular, a table *should* be used, even if you want to display the data is a linearised form. – Alohci May 12 '14 at 15:11
1

As long as the images remain inline elements (you have not stated them as display:block) they can be vertically aligned by verical-align:middle and that is out of your way.

I would assume a wrapper class and some child elements with display:inline-block or even table-cell as APAD1 suggest would do the trick, if you can provide some more info we can see it in more detail.

Having said that, your data semantically, imho, would be considered list items and not tabular data and the best way would be to markup-them as li elements.

alou
  • 1,432
  • 13
  • 16