displaying text next to an image.. best practice

[magician11]

Hi all,

So I want to display an image, then to the right of it, display 3 words equally spaced vertically. I will probably also want to pad out the image from the words a bit too.

So I started to think of a table (1 row 2 cells, where 2nd cell is another table?)… but there is probably a more elegant way? Or best practice is?

thanks.

[joshuanhibbert]

I’m not sure what the words are, or their relation to the image, but it sounds like you should simply use a list. Here is how I would mark it up: http://jsfiddle.net/sl1dr/YJ8hA/

[Paulie_D]

There is no harm in using a table if you are going to be displaying multiple images (especially if they will have different dimensions) with associated text.

If it’s a single image then just use two divs, one for the image & one for the text.

The list method will work but I hesitate to use a list for things that aren’t semantically a list…if you follow me.

[joshuanhibbert]

@Paulie_D I wouldn’t be advocating the use of tables for this at all. Tables are meant for tabular data, not for images. Sorry for being so blunt but this is exactly what we as a community don’t want, we are trying to move away from using tables for layout.

In regards to the list, I assumed that the three words would have some sort of relation, and therefore would semantically fit inside a list (just as a navigation does), I could certainly be wrong though as the original post isn’t very clear. List or not, there is no need for multiple divs; simply float the image to the left.

[Paulie_D]

A set of images with associated text IS tabular data so a table would be appropriate…but, as I said, for multiple images only.

As for the list vs div (or other area selection)…that’s probably a personal choice although it may be influenced by how the words are to be styled, positioned and what the markup is around this section of the html. Nothing wrong with either choice though IMO.

[magician11]

Thanks for the comments and feedback. The words are semantically related, so your example code @joshuanhibbert was very useful thank you.

[joshuanhibbert]

No worries!

[Author]

Posts