(Alsacreations.com) Definition list with float

by PhilippeVay

HTML

<dl>
    <dt>Test :</dt>
    <dd>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</dd>
    <dt>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test :</dt>
    <dd>Test</dd>
    <dt>Test :</dt>
    <dd>Ceci est un test Ceci est un test Ceci est un test Ceci est un test Ceci est un test</dd>
</dl>

CSS

dl {
    width: 500px;
    margin: 5px;
    outline: 1px dotted red;
}
dl dt {
    width: 250px;
    background-color: #aaa;
    color: #666666;
    margin-bottom: 5px;
    padding: 2px;
    float: left;
    clear: both;
}
dl dd {
    color: #666666;
    background: yellow;
    margin: 0 0 5px 0;
    padding: 2px;
    float: left;
    width: 242px;
}

JavaScript

/* http://forum.alsacreations.com/topic-4-62517-1-Aligner-dt-et-dd-horizontalement.html */