Marco Marco - 6 months ago 16
CSS Question

How to display the data side by side

I'm trying to display the data side by side using the most simple code possible.

The problem is when the data is missing, the right side doesn't

float
correctly.

How to fix it?



.pair {
background-color: #ccc;
}
.pair dt {
float: left;
width: 90px;
text-align: right;
color: #999;
}
.pair dd {
margin: 0 0 0 100px;
}

<dl class="pair">
<dt>Date</dt>
<dd>date goes here</dd>
<dt>Country</dt>
<dd>USA</dd>
<dt>Age</dt>
<dd></dd>
<dt>Name</dt>
<dd></dd>
<dt>Other</dt>
<dd>other info goes here</dd>
</dl>




Answer

add clear: bothto .pair dt- this forces it to break the line

EDIT/ADDITION: I added a snippet where this is the only change.

.pair {
  background-color: #ccc;
}
.pair dt {
  float: left;
  width: 90px;
  text-align: right;
  color: #999;
}
.pair dd {
  margin: 0 0 0 100px;
}
<dl class="pair">
  <dt>Date</dt>
  <dd>date goes here</dd>
  <dt>Country</dt>
  <dd>USA</dd>
  <dt>Age</dt>
  <dd></dd>
  <dt>Name</dt>
  <dd></dd>
  <dt>Other</dt>
  <dd>other info goes here</dd>
</dl>

.pair {
  background-color: #ccc;
}
.pair dt {
  float: left;
  width: 90px;
  text-align: right;
  color: #999;
  clear: both;
}
.pair dd {
  margin: 0 0 0 100px;
}
<dl class="pair">
  <dt>Date</dt>
  <dd>date goes here</dd>
  <dt>Country</dt>
  <dd>USA</dd>
  <dt>Age</dt>
  <dd></dd>
  <dt>Name</dt>
  <dd></dd>
  <dt>Other</dt>
  <dd>other info goes here</dd>
</dl>

Comments