In the attached gif, you should be able to see exactly what I mean, if I don't explain it well enough.
I have a containing block, #content_main, defined as such:
Headers (h1, h2, h3, etc) are used inside #content_main and are defined like this:
padding: .5cm .25cm 50px;
If you look at the attached gif, you'll see the problem. The top one is what happens. It extends the border-bottom to the width of the containing block, even though it places the text correctly. The second one "Something Else" is what I want it to look like. I edited that with Fireworks.
h1, h2, h3, h4, h5, h6
font-family: georgia, serif;
border-bottom: 1px solid #009;
Since it renders the same in Firefox and IE, I figure it's my code that's wrong. Any thoughts?