Safari bug with DLs and floats

July 25, 2008 code 2 min read

I came across a weird Safari bug today and couldn’t find any other mention of it on the interwebs. Here’s the CSS and HTML to reproduce it:

dt {
  width: 200px;
  float: left;
}
dd {
  margin: 0 0 0 200px;
}
dd p {
  float: left;
}

<dl>
  <dt>term</dt>
  <dd>
      <p>p1</p>
      <p>p2</p>
      <p>p3</p>
  </dd>
</dl>

What’s happening is that safari is adding a right margin to the dd, even though it is explicitly set to 0. Removing either the float: left from the dt, or position: overflow from the dd (which is used to clear the floats) makes the right margin go away. Very odd.

My ultimate solution was just to add a div inside the dd that set overflow:hidden to clear the floats.

This content is open source. Suggest Improvements.

— @bkeepers