How to display the data side by side

Question

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 1

you need to add dd:empty {clear:left}

and you may want a float:left in .pair (optional)

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

 <dl class="pair"> <dt>Date</dt> <dd>date goes here</dd> <dt>Country</dt> <dd>USA</dd> <dt>Age</dt> <dd>00</dd> <dt>Name</dt> <dd>xxxx</dd> <dt>Other</dt> <dd>other info goes here</dd> </dl> <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 2

add clear: both to .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>