Float overflow?


On a template i seem to suffer of the usual rules of overflow kicking in.

I have a #leftcontent floated to the left with a percentage width. Inside it i have a piece of text (.note) with also a percentage width. So far so good. Next to that piece of text a have a hard coded image, floating right.

Now, when resizing the viewport the image floats into the piece of text. So am i right in my analysis that, because of the percentage width and the fixed intrinsic width of the floated image, at some point the percentage width is less than the width of the elements it contains and when this happens the usual rules of overflow kick in and curing it would be with a min-width? Because the min-width doesn’t seem to cure it.

But then again, i can be way off base here :smiley:



Hi, I haven’t looked at your code, but I’m guessing you put the min width on the text. Putting the min width on the left outermost container should do it.

This is happening since the content of ‘P.note’ is still in the normal flow. Since the floated image is preceding it, the contents of ‘P.note’ have the ability to wrap around the image.

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

W3C 9.5 Floats

If you don’t wish for this to happen, I suggest you float P.note’ too.

Try this:

img.mouse {
    width: 30%;
    margin-right: 12%;

I believe the image is being snagged on the text (because the floats are different computed heights) as it’s trying to drop. Try either floating both, or (the one that will work I think) switch it to display:inline-block (you know how to compensate for FF2/IE I believe?)

Margins of inline-blocks don’t collapse (which may or may not be an issue to the OPer)

@Erik: that didn’t do it. The left outermost container is the #leftcontent which in turn is embedded in a wrapper with already a min-width. I tried setting the min-width on the #leftcontent with no luck.
@James: yeah, i’m aware about that but floating the “p.note” also will give me eventually a floatdrop
@ralph: nice, that does the trick. However, as a side effect it let’s the image scale upon resizing the viewport…
@ryan: yeah, i was thinking of going the display:inline-block as it’s my favorite ways of using for layouts lol. But still no go…

Must be a mushy brain :smiley:

Yes, well it would do since you’re dealing with a replaced element with an fixed intrinsic width, along with percentage width elements.

You may want to try something like this:

  1. Keep P.note in normal flow
  2. Remove the specified width of P.note
  3. Add ‘overflow:hidden’ to P.note

This will allow you to retain the fixed width of the IMG, whilst P.note retains the ‘expand-to-fit’ behavior of a block box in normal flow, since it establishes a new block formatting context.

That was a random reply to mine…considering I never even mentioned margins, let alone margin collapse lol.

Not that I mind, it’s a good point, but you have to remember that it was floated before…which also doesn’t has margin collapse happen:).

ALso, giving .note and .mouse display:inline-block gets it so upon viewport resize (minus the FF2/IE fixes), the image doesn’t snag to the float. It instead drops. I’m assuming you want no drop?

I resized until pixel perfection it wouldn’t drop (1px less would drop I mean) and then I took that <body> width, divided by two, and so just give #leftcolumn a min-width:507px or give the container twice that min-width to have the other column not drop :slight_smile:

@james: yeah that’s almost perfect, except at around 600px, the ‘p.note’ column get’s so small that it’s unreadable.
@ryan: indeed, no drop lol. Min-width on the leftcolumn would be perfect but that leaves me with the drop of the other column. Giving the container the doubled min-width works. Unfortunately i was targeting for 600 px lol

And i haven’t even tested in IE6 lol

Well kudos to you if you can get both working lol, somethings gonna have to give, either a drop or something ;). You could always place the image as a background image set to the right and just have the element with that have right padding…I mean it could sorta simulate it I guess?

kudos from the award winner lollolol. Gonna get some quality time and start over 2morrow with your suggestion. Man i hate redoing my own site. I had a bunch of templates there i made back in the days when the animals could speak… all fixed width… easy as cake. Redoing them as fluid templates… grrrrrr :rofl:

Lol hey buddy the badge isn’t on me yet ;).

But I do think my suggestion will work, the background image suggestion I mean. It seems HIGHLY likely it will work.

It SHOULD work because i had it as a background image in my original template lol. And don’t worry, the badge is already on the mail :wink:

In response to your original message:

You didn’t, hence why I brought it up. Since margins of inline-blocks don’t collapse, I thought it best to at least inform the OP’er as they might become a bit baffled as to why there would be an abnormally large margin gap between the surrounding elements of the inline-block (as the surrounding Ps have margin, and so does the inline block)

No it wasn’t. The margin is (or was) applied to the in-flow sibling (which does participate in margin collapsing) of the floated element - not the other way around

Yes, but that’s why I LIKE this method. :wink:

Hmm, seems not so easy the effect i’m looking for lol. The background image reverses the problem to the rightcolumn. If i can’t get it to work, i’m inclined to go with ralph’s solution.

Luki, you misunderstood me. Try this

<div class="container">
<p class="note">Hong Kong Phooey, number one super guy. Hong Kong Phooey, quicker than the human 

eye. He's got style, a groovy style, and a car that just won't stop. When the going gets tough, he's 

really rough, with a Hong Kong Phooey chop (Hi-Ya!). Hong Kong Phooey, number one super guy. Hong 

Kong Phooey, quicker than the human eye. Hong Kong Phooey, he's fan-riffic!</p>

Noticed I removed the .test div but put a container in its’ place


zymouse.jpg) no-repeat top right;

Ah yeah… like i said … mushy brain. A quick stress test in Opera revealed it’s holding up, except the img gets’ cut off on small font-size… but that’s no big deal.
IE6 is getting a bit of a headache because it drops the rightcolumn under 600px lol (what to expect)