Why would this div have an unnecessarily large computed height?

Question

Link: http://www.fraynepainting.com/services

The problem is that div#dditem_2 (the div with the "Take a look..." text) is getting a computed height of around 500px for no reason that I can find in the CSS, which is pushing the UL below it down really really far.

I discovered that if you set display: none or position: absolute (or anything else that removes it from the flow of elements) on the sidebar, then the bottom UL moves up like it should, so it looks like maybe the UL is trying to clear the sidebar, but I can't figure out why that would be either.

I've reproduced the problem in Firefox and Chrome so far. Any ideas?

Answer 1

That looks like a lot of divs. Did you try putting border: 1px solid red around the divs to see where they may be touching?

Answer 2

It's due to the following rule in v2basic.1263412699.css:

.overwrap .button-bar:after,#content .item:after,#content .blogcomment:after
{
  content:".";
  display:block;height:0;clear:both;visibility:hidden
}

Remove content:"."; from this rule or remove the class item from #dditem_2. Not sure what it's there for, but it's making the height go crazy.