Keep H Elements From Underlapping Floats?

[Makosuke]

This is something that's been bugging me ever since I've gotten into lightweight CSS-based designs. I'm sure it's a silly question with an obvious answer, but whatever that solution is, it hasn't come to me and Google has not been my friend:

What I want to do is have a standard page layout with several paragraphs seperated by various header tags along with, say, a floating DIV or IMG over on the right. My problem comes when I try to give the H tag a border--for example, a bottom border on an H2 to create a line across the page breaking it up better. Works great unless the float happens to be beside the H tag--then, since the H tag's block-level box extends all the way to the right edge of the containing element, the line goes under (or over, depending) the float, even though the contained text wraps.

An obvious solution is to set the clear property for the H tag and prevent it from being beside the float, but that can cause some big gaps in the page, and I'd rather just have the underline extend to the floating object's margin, but no further.

Is there some obvious way to do this, or am I trying to fit a square peg into a round hole?

 

[angelneo]

It's kind of tough to understand your question, perhaps, you can do up a page illustrating your problem? This is so that people can post the correct codes to your problem as well. There is always a way, maybe you can try not using H tag but use some other tag as subsitute.

 

[Rower_CPU]

The issue's not with the <h_> tags but with floats. Floated elements are removed from the document flow and block-level elements that follow/precede them will under/overlap.

To prevent this, clear your floats using a <div> and some CSS to make sure the browser gets rid of the overlaps.

<div class="spacer"> </div>

.spacer {
   clear: both
   display: block;
   height: 1px;
}

 

[Makosuke]

My bad for not including an example. Here's a simplified page: http://www.steelbluepanic.com/divexample/

As for Rower's suggestion, I think I follow what you're saying (add a tiny empty div before the H* tag to clear any floats beside it, right?), but if I'm understanding correctly, that's be exactly the same as setting "clear: both" for the H* tag. Not that this doesn't work, but depending on the height of the float, it can leave a huge gap above the header, where I'd really rather just have the header tag's block-level box behave as if it were an inline element and wrap to the float...

 

[Rower_CPU]

OK, now that I see your example, I get what you're after.

You've got a couple of options - you can use "display: inline" on the H tags to switch them from block-level display, but the bottom border won't extend past the text contained in the header. The other option, and this really only works if you've got something that will always be floated into that position, is to add a margin-right to the header tag equivalent to the width of the floated div.

 

[Makosuke]

Thanks again for the suggestions, Rower, but those are the same two fixes I've come up with myself, neither of which is a very good fix (if I make it inline-level, I might as well just underline the text, and if I give it a right-hand margin, it'll look funny when it doesn't overlap a float).

It seems like there ought to be a way to force a box to extend to the edge of any floating elements it is parallel to, but no farther, but I guess not. Float the object with automatic width or something...?

 

[Rower_CPU]

Or add a background color to your floated div and be done with it.

 

[Makosuke]

Just giving the floating DIV a background color of course keeps the underlying border from showing through, but it still leaves that border bumping up against the edge of the float (and maybe sticking out the other side depending on the margins), which is what I was looking to avoid.

But (and maybe this is what you were getting at), you gave me an idea that does work perfectly: Either give the floating object a fat border the same color as the background in lieu of a margin, or if a border is required, put it inside a 2nd div that serves as a background-colored margin.

It's a bit crude for my taste, but it would end up looking exactly the same as if the underlying borderline stopped a comfortable margin shy of the floating object and should be pretty safe across browsers.

What it looks like if anybody but me cares

Thanks, Rower--that's been bugging me for a while!

 

[Rower_CPU]

No problem...glad I could sorta help.