Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This works in IE7, untested in IE6. Adjust as needed. <a href="http://www.the-art-of-web.com/css/format-dl/" rel="nofollow">Adapted from here.</a></p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; body { font-family: Arial; font-size: 62.5%; } * { margin: 0; padding: 0; } #main { font-size: 1.4em; } dt { font-weight: bold; } hr { clear: both; } dl.aligned { width: 300px; } .aligned dt { clear: both; float: left; margin: 0 0 0.5em 0; width: 100px; } .aligned dd { clear: right; float: right; margin: 0 0 0.5em 10px; width: 190px; } &lt;/style&gt; &lt;!--[if lt IE 8]&gt; &lt;style type="text/css"&gt; .aligned dt { float: left; clear: left; margin: 0 0 0.5em 0; width: 100px; } .aligned dd { clear: none; float: none; margin: 0 0 0 100px; width: 190px; } .aligned dt:after { content: ":"; } &lt;/style&gt; &lt;![endif]--&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="main"&gt; &lt;dl class="aligned"&gt; &lt;dt&gt;First title&lt;/dt&gt; &lt;dd&gt;1.1 definition&lt;/dd&gt; &lt;dd&gt;1.2 definition - very long to test wrapping&lt;/dd&gt; &lt;dd&gt;1.3 definition&lt;/dd&gt; &lt;dt&gt;Second title&lt;/dt&gt; &lt;dd&gt;&lt;/dd&gt; &lt;dd&gt;&lt;/dd&gt; &lt;dt&gt;Third title&lt;/dt&gt; &lt;dd&gt;3.0 definition&lt;/dd&gt; &lt;dt&gt;Fourth title - very long to test wrapping&lt;/dt&gt; &lt;dt&gt;Fifth title&lt;/dt&gt; &lt;dt&gt;Sixth title&lt;/dt&gt; &lt;dd&gt;6.0 definition&lt;/dd&gt; &lt;/dl&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload