dl-horizontal float issue

[garysweaver]

When you have a definition list with dl-horizontal in a widescreen fluid layout, and have empty dd's towards the bottom, things under the dl with dl-horizontal move up (float issue) and looking at it in firebug appears that the dl is only is as tall as the last populated dd in the dl in FF 13.0 in OS X 10.7.4.

Currently working around with a hack under the dl:

<div class="clearfix">&nbsp;</div>

[garysweaver]

Ok, here is a possible better fix, borrowing part of what .clearfix does. The following could be added to .dl-horizontal:

.dl-horizontal {
  &:after {
    display: table;
    content: "";
    clear: both;
  }
}

So in less/type.less, that whole dl-horizontal definition would be:

// Horizontal layout (like forms)
.dl-horizontal {
  dt {
    float: left;
    width: 120px;
    clear: left;
    text-align: right;
    .text-overflow();
  }
  dd {
    margin-left: 130px;
  }
  &:after {
    display: table;
    content: "";
    clear: both;
  }
}

That seems like it works.

[garysweaver]

Associated pull request: #3821

[mdo]

Closing as dupe of #3821.