Responsive, semantic, and standards compliant method of creating regular rows?

HTML & CSS
1

First time designing an intensively responsive design website. I have a description list of committees in my client’s organization (<dt>=the committee name, <dd>=committee description). When the viewport gets to a decent width, I want to be able to switch the <dt>and <dd> combos from traditional dl formatting to a two column grid, then a three column grid when it gets significantly wider.

I’ve wrapped each <dt> and <dd> combo in a <div>. When the viewport gets to be 1000px, I’ve floated the <div>s left, and set the width to about 50% (minus some padding and margins). Works great in creating the columns how I want. Unfortunately, because of variations of length in the <dd>s, the rows get screwy. If I weren’t worried about another responsive breakpoint, I’d just wrap each pair of <div>s in a row in another <div> and use some clearfix method to make sure that <div> is cleared. But since I would like to be able to switch from two to three columns in very wide viewports, that doesn’t seem viable.

I’m no wizard in CSS. Is there some solution I’m overlooking to get each row in the <dl> to align, regardless of the number of columns?

I appreciate any advice from the masters in responsive design out there.

2

Hi,

If your issue is that the floats snag when they move to the next row then you can use display:inline-block instead of floats as they won’t snag and as long the inline-block element pairs fill the line length then they will always start on a new line.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
dl,dt,dd{margin:0;padding:0}
dl {
    width:100%;
    line-height:1.2;
    text-align:center;
}
dt{font-weight:bold;}
dt, dd {
    margin:0 1% 7px 0;
    width:49%;
    display:inline-block;
    text-align:right;
    vertical-align:top;
}
* html dt,* html dd{display:inline}/* ie6 fix for inline-block*/
*+html dt,*+html dd{display:inline}/* ie7 fix for inline-block*/
dd {
    text-align:left;
    margin:0 0 7px;
    vertical-align:bottom;/* change to vertical-align:top to align at top */
}
</style>

</head>

<body>
<dl>
    <dt>Concert:</dt>
    <dd>Jackson Browne</dd>
    <dt>Performed by:</dt>
    <dd>Jackson Browne and friends</dd>
    <dt>Location:</dt>
    <dd>Royal Albert Hall <br />
        Knightsbridge<br />
        London<br />
        WC1</dd>
    <dt>Date:</dt>
    <dd>November 24, 2011</dd>
    <dt>Cost:</dt>
    <dd>£60.00</dd>
    <dt>RSVP:</dt>
    <dd>Call Fred at  1234 56789</dd>
    <dt>Lorem ipsum<br />
        over 3 lines<br />
        or more:</dt>
    <dd>Lorem ipsum</dd>
    <dt>Concert:</dt>
    <dd>Jackson Browne</dd>
</dl>

</body>
</html>
3

That appears to have done the trick. Thanks so much for the suggestion!

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.