Member Avatar for xman

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?

Thanks,
X.

  • 2 Contributors
  • 2 Replies
  • 94 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by xman

Dani AI

Generated

What is happening here is a CSS box-model/layout issue: the H2 is a block-level box that by default stretches across the container, so its bottom border is drawn across that full box. A floated image sits outside the normal flow and does not shrink the H2’s box. As pointed out, forcing the H2 into a shrink-to-fit formatting mode stops the border where the text ends; confirmed that approach fixed the problem in Firefox.

Two practical, modern options that avoid the full-width border:

Make the heading shrink to its content with display: inline-block. This keeps the border only under the text. Example:

h2 {
  display: inline-block;
  border-bottom: 2px solid red;
  margin: 0;
  vertical-align: top;
}

Or use a layout that treats image and heading as separate items (no float), for example Flexbox on the wrapper:

.container {
  display: flex;
  align-items: flex-start;
}
.container img {
  margin-left: auto;
}
h2 {
  margin: 0;
  border-bottom: 2px solid red;
}

Notes and troubleshooting: inline-block can introduce a small whitespace gap (remove the HTML whitespace or collapse it with font-size techniques). If text must wrap alongside the floated image, consider a different layout (flex or grid) or reserve space with a right margin — but margins are brittle if the image size changes. For details on display modes and flexbox behavior, see the MDN docs on display and Flexbox: display and Flexbox basics.

Recommended Answers

All 2 Replies

Member Avatar for tgreer

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">
<html><head><title>Untitled</title></head><body>
<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>
</div>

</body>
</html>
Member Avatar for xman

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.