How to Align Dt and Dd Side-By-Side Using Flexbox with Multiple Dd Underneath The Other

How to align dt and dd side-by-side using flexbox with multiple dd underneath the other?

How about setting flex-wrap on the dl and have a width > 50% for dd
along with margin-left: auto?

See demo below:

dl {  display: flex;  flex-wrap: wrap;}dt {  width: 33%;}dd {  margin-left: auto;  width: 66%;}

<dl>  <dt>Authors</dt>  <dd>John Doe</dd>  <dd>Jane Doe</dd>  <dd>Max Mustermann</dd></dl>
<dl>  <dt>Publishers</dt>  <dd>John Doe</dd>  <dd>Jane Doe</dd>  <dd>Max Mustermann</dd></dl>

How to style dt and dd so they are on the same line?

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>

<dl> - <dt> - <dd> tags in side by side horizontal responsive view

To answer your question without evoking the almighty bootstrap, see the following jsfiddle.

HTML

<dl>

  <div>
    <dt>
      Item One
    </dt>
    <dd>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </dd>
  </div>

  <div>
    <dt>
      Item One
    </dt>
    <dd>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </dd>
  </div>

  <div>
    <dt>
      Item One
    </dt>
    <dd>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </dd>
  </div>

</dl>

SCSS

body {
  font-family:Arial, sans-serif;
}

dl {
    display: flex;
    flex-direction: row;
}
  div {
    dt {
      display: block;
    }
  }
}

This will place all of your <dt> and <dd> pairs in a single row. You can then use CSS breakpoints to set how many items you want per row, or just have flexbox do it automatically with flex-wrap: wrap and by setting your desired width on the <div>s like dd div { width: 33.3%; }. This is how many frameworks, like bootstrap, do it with their 12-column layout and three breakpoints.

See this useful css-tricks article for more tips on how to use flexbox.

DT with multiple DD on the right?

This isn't that hard, just remember your combinators:

dt {
    float: left;
    width: 8em;
}

dd {
    margin-left: 9em;
}

dd + dd {
    margin-left: 9em;
}

JS Fiddle demo.

References:

• E + F, adajacent-sibling selector.

Better way to set distance between flexbox items

• Flexbox doesn't have collapsing margins.
• Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Creating a Definition LIst with Variable-Width <dt> and <dd> (Includes JSFiddle)

Here is some CSS that may 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;
}

Fiddle reference: http://jsfiddle.net/audetwebdesign/45jDK/

Explanation of Why It Works

(1) To see your background color, set overflow: auto for dl. Since all the child elements are floated, the height collapses to zero by default.

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

(3) For dd, using display: table-cell seems to do the trick.

On dt, padding and margin work as expected. On dd, padding works but margin has no effect, probably because of how table-cell works.

I tried this in Firefox but no where else.

PS
I added some extra content on one of the dt elements to see how an extreme situation would render. I also experimented with the width of dl and the layout remains stable.

---

Related Topics