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;

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.


avatar of Brandon Keepers I am Brandon Keepers, and I work at GitHub on making Open Source more approachable, effective, and ubiquitous. I tend to think like an engineer, work like an artist, dream like an astronaut, love like a human, and sleep like a baby.