Check out the following link:

The red bottom border isn't stopping for my right aligned image, but my h2 text is. Any ideas why this is happening, and how to have the bottom border stop where the right image starts?


12 Years
Discussion Span
Last Post by xman

Yes, the problem is that the border underlines the complete "box" that the H2 would normally fill. The image comes along and alters the text, but the border is already drawn and ignores that. It's a small rendering problem, same would say a bug.

The fix is to force the H2 to display a certain way. Add display: table-cell; to your style declaration for the H2. That fixes it in FireFox, IE still has a bug, but not as dramatic. You can play with other values for "display" to see if one works better for you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<div style="width: 700px;">
<img src="nokia9300.jpg" alt="" style="padding: 10px; float: right;" border="0" height="281" width="336">
<h2 style="border-bottom: 1px solid red; display: table-cell;">Analysis: Paid search results often not worth the click</h2>


yep, that fixed it in firefox. Thanks for your help!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.