Definition lists are great and rarely I see these being used by front-end developers let alone correctly styling and controlling them so here’s my solution to a common problem. Generally if the term and definitions are to sit next to one another then floats would be used but this also present a problem where if there’s large text in either one, term or definition, then it breaks the layout so you probably end up adding more markup, classes and styles to control layout problems. So here’s my solution. Let’s say we have the following markup:
- Name:
- Qasim Alyas
- Age Age Age Age Age:
- 28
- Addressssssssssssss:
- 12 London Way, London, W1 1AA; 12 London Way, London, W1 1AA
- Occupation:
- Front end developer
Then we use some css, specifically using display: inline-block rather than floats. I’ve added borders to show where the terms and definitions are.
dl { font-size: 1.4em; width: 300px; border: 1px solid green; }
dl * { margin: 0; }
dt, dd { display: inline-block; vertical-align: top; margin-bottom: 3px; }
dt { width: 85px; border: 1px solid blue; word-wrap: break-word; } /* word-wrap breaks long text and wraps it*/
dd { width: 200px; padding-left: 5px; border: 1px solid #f0f; }
Now I.E needs a bit of help, as usual, so we give it the following:
dt, dd { #display: inline; } /* the # character targets IE7 and 6 together */
That’s it! No need for floats and no layout problems. Works in IE6+, FF3+, Safari 3+ and Chrome 1+
Bare in mind that the current version of Firefox 3.0.8 doesn’t yet support the word-wrap property but the beta (3.5) does.
This entry was posted on Monday, April 6th, 2009 at 7:24 am and is filed under article, development, web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.