eSnippets.net, a code gallery for creating, saving and sharing all kinds of code snippets.

Style dt and dd so they are on the same line — HTML

Posted On: Friday, April 3, 2015 at 3:10 AM

Style html definition list so that it appears on one line.

<style type="text/css">
* {
padding:0;
margin:0
}
dl {
width:100%;
overflow:hidden;
background:#ff0;
}
dt {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
background:#cc0;
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
background:#dd0
}
</style>
<dl>
<dt>Mercury</dt>
<dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
<dt>Venus</dt>
<dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
<dt>Earth</dt>
<dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd?>
</dl>

You need to be logged in to comment! x

rpjs

Joined on Saturday, May 3, 2014
Contributed 29 Snippets

Get Social and Share

Tags