Create a LIst definition with variable width <dt> and <dd> (includes JSFiddle)

Question

I have a list of definitions in which both terms and definitions have different widths. [EDIT: To clarify, when I talk about different widths, I mean that they should not be a fixed width. Obviously, this effect is easily achieved by setting the width ''] . I need each pair to sit side by side, becoming multi-line, if necessary, without wrapping under.

Here is a JSFiddle showing my problem: http://jsfiddle.net/2H9YN/ (code below)

[EDIT: Please note that the colors are for reference only. They do not matter for the final design]

I currently have this:

But I want this:

HTML:

<dl> <dt>dt: Lorem Ipsum</dt> <dd>dd: Lorem imperdiet </dd> <dt>dt: Lorem id libero in Ipsum</dt> <dd>dd: Lorem id libero in ipsum dolor </dd> <dt>dt: Lorem Ipsum</dt> <dd>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</dd> <dt>dt: Lorem id libero in Ipsum</dt> <dd>dd: Lorem in ipsum dolor </dd> </dl> 

CSS

 dl { width:400px; background-color: rgba(0, 0, 0, 0.2); float: left; } dt { clear:both; float:left; background-color: rgba(255, 0, 0, 0.3); } dd { float:left; background-color: rgba(0, 255, 0, 0.3); margin: 0 0 0 4px; } 

Essentially, I'm looking for a <dd> to fill the gap left before it with <dt> , and if that means it needs to be completed, then it wraps below itself, not below the neighboring <dt> .

Answer 1

Here are some CSS that might work:

 dl { width: 400px; background-color: rgba(0, 0, 0, 0.2); overflow: auto; } dt { background-color: rgba(255, 0, 0, 0.3); float: left; clear: left; margin-right: 10px; /* Margin work */ padding: 5px; /* Padding works */ } dd { background-color: rgba(0, 255, 0, 0.3); display: table-cell; padding-left: 10px; /* Padding works */ padding-bottom: 10px; margin-left: 100px; /* Margin does not work */ margin-bottom: 100px; } 

Link to the script: http://jsfiddle.net/audetwebdesign/45jDK/

Explanation why it works

(1) To see the background color, set overflow: auto to dl . Since all children are floating, the default height drops to zero.

(2) You want dt start on a new line, so use clear: left so that dt does not try to leak after the short dd element.

(3) For dd using display: table-cell like a trick.

In dt , padding and margin work as expected. padding works on dd , but margin doesn't work, probably due to how table-cell works.

I tried this in Firefox, but not elsewhere.

PS
I added additional content to one of the dt elements to see what the extreme situation would look like. I also experimented with width of dl and the layout remained stable.

Answer 2

The fact that you are using a definition list makes this very difficult. Without any container, in order to provide a link between dt and dd, you have to set limits somewhere.

The closest I can get it with your markup in Opera, but not with Chrome due to differences in Flexbox implementations:

http://jsfiddle.net/2H9YN/4/

 dl { width: 400px; background-color: rgba(0, 0, 0, 0.2); float: left; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } dt { background-color: rgba(255, 0, 0, 0.3); -webkit-flex: 0 0; -ms-flex: 0 0; flex: 0 0; white-space: pre; } dd { background-color: rgba(0, 255, 0, 0.3); margin: 0 0 0 4px; -webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; } 

And of course, it only works if you have never had more than 1 dd per dt.

If you want to change your markup so that you have some kind of string container, you have more options. It should not be a table, it can be a bunch of articles containing h1 (dt) and paragraph (dd). Tags do not matter how elements are grouped together.

 <table> <tr> <th>dt: Lorem Ipsum</th> <td>dd: Lorem imperdiet </td> </tr> <tr> <th>dt: Lorem id libero in Ipsum</th> <td>dd: Lorem id libero in ipsum dolor </td> </tr> <tr> <th>dt: Lorem Ipsum</th> <td>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</td> </tr> </table> 

Using Flexbox again, we can get a perfect match right down to your gray background, breaking through when the elements lack content to reach the goal. We can also get a reasonable margin for Flexbox browsers:

http://jsfiddle.net/2H9YN/7/

 table { width: 400px; background-color: rgba(0, 0, 0, 0.2); } table, tbody, th, td { display: block; } tr { display: block; display: -webkit-flexbox; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } th, td { display: table-cell; vertical-align: text-top; } th { background-color: rgba(255, 0, 0, 0.3); white-space: pre; font-weight: normal; } td { background-color: rgba(0, 255, 0, 0.3); margin: 0 0 0 4px; }