You can have more than one <dd> element for each <dt> element (any given term could have multiple definitions).
This can be accomplished by adding a DIV element with the CSS overflow: hidden; around the content of the DD tag. You can omit this extra DIV , but the content of the DD tag will wrap under the floated DT .
The <dd> tag is used to describe a term/name in a description list. The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names). Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.
dl {
width: 100%;
overflow: hidden;
background: #ff0;
padding: 0;
margin: 0
}
dt {
float: left;
width: 50%;
/* adjust the width; make sure the total of both is 100% */
background: #cc0;
padding: 0;
margin: 0
}
dd {
float: left;
width: 50%;
/* adjust the width; make sure the total of both is 100% */
background: #dd0;
padding: 0;
margin: 0
}
<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>
I have got a solution without using floats!
check this on codepen
Viz.
dl.inline dd {
display: inline;
margin: 0;
}
dl.inline dd:after{
display: block;
content: '';
}
dl.inline dt{
display: inline-block;
min-width: 100px;
}
Update - 3rd Jan 2017: I have added flex-box based solution for the problem. Check that in the linked codepen & refine it as per needs.
dl.inline-flex {
display: flex;
flex-flow: row;
flex-wrap: wrap;
width: 300px; /* set the container width*/
overflow: visible;
}
dl.inline-flex dt {
flex: 0 0 50%;
text-overflow: ellipsis;
overflow: hidden;
}
dl.inline-flex dd {
flex:0 0 50%;
margin-left: auto;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
}
CSS Grid layout
Like tables, grid layout enables an author to align elements into columns and rows.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
To change the column sizes, take a look at the grid-template-columns
property.
dl {
display: grid;
grid-template-columns: max-content auto;
}
dt {
grid-column-start: 1;
}
dd {
grid-column-start: 2;
}
<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>
If you use Bootstrap 3 (or earlier)...
<dl class="dl-horizontal">
<dt>Label:</dt>
<dd>
Description of planet
</dd>
<dt>Label2:</dt>
<dd>
Description of planet
</dd>
</dl>
Assuming you know the width of the margin:
dt { float: left; width: 100px; }
dd { margin-left: 100px; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With