2 columns with icons and text

Get Started
1

I’m working on an event info website and there’s a design element I’m unsure about. In the screenshot you can see a hacked together rough version of what I’m going for. Ideally the spacing would be even, and the text beside each icon would be vertically centered.

This info is all within a customized Wordpress post.

I think I could pull this off using a bunch of nested DIVs but that seems bloated. Anyone have any better solutions?

2

The most simple I could think of is 4 floated <p> elements (as you don’t need div for inline content) with those icons as background and a large left padding. Depending on the context you’ll also need a container div to hold them all.

3

Or you can go for an UL with list-style-type-non (where you set the width, padding, margin and background color) and floated list elements (making sure you set margin, padding, line-height, width so the lists float naturally and you don’t need clearfixes) and the images set as backgrounds for each each element.

So the html code would look like this:

<ul class=“event_item_information”>
<li class=“when”>September 19 2011, 8:00 pm</li>
<li class=“where”>123 Ave. Toronto</li>
<li class=“fee”>Free</li>
…
</ul>

I think this is more semantically correct than nested divs.

4

An even more semantically correct and accessible option would be to use mark it up as a definition list. The advantage of using inline images rather than background images is that you can add alt text, so that it makes sense without images.

<dl>
<dt><img src="date.png" alt="When?"></dt> <dd>19 September</dd>
<dt><img src="location.png" alt="Where?"></dt> <dd>123 Ave., Toronto</dd>
<dt><img src="fee.png" alt="Cost?"></dt> <dd>Free!</dd>
</dl>

In the CSS, you can then float the <dt> and <dd> (or set them to inline-block), and set widths on the <dl>, <dt> and <dd> ensuring that the overall <dl> width is enough to accommodate two <dt>/images and two <dd>s.

5

Thanks everyone!

I started coding after only reading the first reply so I have a working version using paragraphs. I’ll try out the definition list method soon.