14

I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around the float: right div properly.

However, if I set the p elements to have a border, or do a <hr />, the border does not stop where the text stops, but extends behind the float: right div.

Here is a beautiful mspaint depiction of the situation:

Note that the green part of the black horizontal line is behind the floating div.

How do I get the border or <hr /> or whatever to be only as wide as the text, and not go behind the div?

double-beep
  • 5,031
  • 17
  • 33
  • 41
Seth Carnegie
  • 73,875
  • 22
  • 181
  • 249

6 Answers6

13

I know this problem was posted some time ago, but I had the same problem today and found another solution:

http://jsfiddle.net/MvX62/

I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.

Also you don't need to define z values and don't need any hacks or workarounds.

iuiz
  • 957
  • 1
  • 10
  • 23
3

I've had this problem before, and I wasn't sure if it was solvable.

In your case, however, you could wrap the green box with another element and swap margin with padding and set its background to #fff to cover the offending line.

alex
  • 479,566
  • 201
  • 878
  • 984
  • Iv also usd this trick before... unfortunately it only works when you have solid or easily aligned backgrounds. – prodigitalson Apr 27 '11 at 01:19
  • Yeah, sadly the background is not solid white, it's translucent white on top of a complicated background image :( – Seth Carnegie Apr 27 '11 at 01:20
  • @Seth Damn, you could give the elements that appear to the left of the green box a class and set them to an explicit width - but this is hacky and a maintenance issue. – alex Apr 27 '11 at 01:22
  • Yeah, but the content to the left of the floating div is "News" type stuff, and will be updated frequently, and there is no telling how long it would be. If it had an explicit width, everything below the floating div would be empty and that would be a waste of space. – Seth Carnegie Apr 27 '11 at 01:25
  • @Seth: Time to rethink that layout :-) – prodigitalson Apr 27 '11 at 01:28
  • @Seth It's not an ideal solution, just a possible one. BTW, I think you confused what I said. I didn't say give *all* of them an explicit width, just the ones which appear to the left of the green box. You could add the class with JavaScript, loop through all of them, getting their position and calculating it in reference to the bottom of the green box. – alex Apr 27 '11 at 01:28
  • @prodogitalson It's such a simple layout I hate to give up, it seems like this should be possible. Oh well, I guess that's the way it goes. – Seth Carnegie Apr 27 '11 at 01:29
  • @alex Actually that might work.. Since it's only the ones whose bottoms end before the bottom of the floating div that are the problem, and the rest can be left alone. I'll see what I can come up with. – Seth Carnegie Apr 27 '11 at 01:31
  • @Seth: Well like alex says there are some solutions but none that dont require hard to maintain or js dependent hacks. Though i would argue normally a news box should really be a column or in a column, not floated inline with the content... – prodigitalson Apr 27 '11 at 01:32
1

Check out the fiddle...

http://jsfiddle.net/UnsungHero97/8BwGB/3/

What I did here was give the floated element a z-index CSS property, which will put it "above" the non floated element (which has a smaller valued z-index) and the <hr /> will not go above the floated element.

In regards to getting it as wide as the text, in my example it is as wide as the text, but I'm not sure if that holds across browsers (I'm on Chrome). Let me know if it doesn't.

I hope this helps.
Hristo

p.s. excellent mspaint skillz :)

Hristo
  • 45,559
  • 65
  • 163
  • 230
  • Uh.. That actually looks like it works. Tested in IE 9 and FF 4 too. But I'm not sure why it works, since all you did (I think) was set the z-index of the floated div to higher than that of the text. Is there something else going on there? And thanks, I pride myself on my mspaint proficiency. – Seth Carnegie Apr 27 '11 at 01:43
  • ... yeah I didn't do anything special here, I don't think. I think the fact that the element is floated to the right allows things to wrap around it. Maybe it was the relative positioning that did the trick? – Hristo Apr 27 '11 at 01:45
  • You, sir, are a genius. Simply setting the `z-index` of the floating div to something high will make `
    `s wrap around it. I can't for the life of me guess why, because it seems like the `
    ` would be _more_ inclined to go underneath the floated div when it has a high `z-index`.     – Seth Carnegie Apr 27 '11 at 01:49
  • I'm not quite sure that is the reason... I just tried my example by getting rid of the `z-index` on both elements and the `
    ` still behaves (in Chrome). But if it works, it works :)     – Hristo Apr 27 '11 at 01:50
0

You would have to set the width of the paragraphs to the width of the container minus the width of the floating element, or you could give them a margin on the same side of the float equal to the float's width.

prodigitalson
  • 60,050
  • 10
  • 100
  • 114
  • 1
    Wouldn't the text then fail to wrap around the green element? – alex Apr 27 '11 at 01:15
  • 1
    yes it would, but this is how `float` works there really isnt a way around this "issue". – prodigitalson Apr 27 '11 at 01:16
  • @prodigitalson I agree with you there. – alex Apr 27 '11 at 01:18
  • It seems a little weird to me that the text would wrap but its bounding box would not - like the text would cease to follow the contours of its container. – Seth Carnegie Apr 27 '11 at 01:21
  • Float doesnt change the contours of the container... it changes the wrapping of surrounding `lines` in the layout to flow around the floated element: http://www.w3.org/TR/CSS21/visuren.html#floats – prodigitalson Apr 27 '11 at 01:23
0

Div cannot wrap around another div. Wrapping is text-only property. You can simulate wrapping by setting the margin-right for the master div to the width of the div you want it to wrap, but text wil not flow under the inset div.

Dimitri
  • 6,923
  • 4
  • 35
  • 49
0

Some values of the overflow property can cause this behavior. Specifically, overflow: visible which is often set by popular CSS resets/normalization.

Blorf
  • 536
  • 3
  • 12