What could cause this floated element to drop - just sometimes?

[Bweb]

Hi all

Hope someone can point me in the right direction, we have a website that consist of a 3 column floated webpage and occasionally the right column drop the float.

This happes most often when using IE6, it has never happened with Firefox and only a couple of times with IE7.

Columns has fixed width and please remember it only happens some times.

Any advice on what could be causing this or how to track down the error?

Best regards

Bweb

[bill]

Welcome to WebmasterWorld Bweb.

Could you post some sample code [webmasterworld.com] to show us how you have things laid out?

[londrum]

it might be the old 3-pixel bug in IE. check to see if there's some italic text in there. IE seems to increase a boxes width by 3-pixels when italic text is at the edge of a paragraph. (i'm not sure if it increases it when the italic text is in the middle of a line as well, but it might do.)

[Robin_reala]

With italic text the box size increases to contain the edges of the glyphs that would normally extent past the edge of the box. The only occurs when the italic text touches the edge of the box, not when it's in the middle.

[Xapti]

Essentially this would happen when you have a fixed width document/container holding your three columns which are also fixed width. When one column somehow gets bigger (be it a border, padding, margin, or some containment of text bug) the float will go to the next line, since that's how a float is supposed to behave if it can't fit horizontally across a container.

[Bweb]

Hi again

Thanks for your info so far, and sorry for my late answer, I expected to be mailed when replies was made. Thought I activated that.

Don't think its a italic text issue because the float drops occasionaly <- to be more precise the page loads and then maybe the float is dropped, then by refreshing the page it jumps back up correctly.

Sorry I should have written that the first time.

Best regards

Bweb

[londrum]

are your boxes sized by pixels, or percentages?

[Bweb]

Hi again

By pixels.

Best regards

Bweb

[londrum]

after doing a little digging around i found this solution on the net... apparently it works. never tried it myself though.

* html #name {
overflow: hidden;
width: expression(document.body.offsetWidth - (document.body.offsetWidth - 40));
}

obviously #name will be the ID name of the div that is dropping.
that example is supposed to give a div a fixed width of 40 pixels. so you should change the number to whatever you want.

the only downside is that it uses an IE-only thing in the CSS, so it will stop your CSS sheet from validating.

[Xapti]

width: expression(document.body.offsetWidth - (document.body.offsetWidth - 40))

Is this some kind of trick?or perhaps a typo? why isn't it just written: width:expression(40), or width:40?

a-(a-40) = 40... it seems unnecessary to add that strange expression unless it's some sort of strange trick, or just a typo.

[Bweb]

Hi

I agree it looks very strange the former post regarding width.

But for now I hope the problem is fixed.

Webpage consist of 3 columns, I removed the following in the middle column:

Removed an unnessary extra <div>, removed a <cite> and added an clear: both on on a float within the column.

For now it looks like it stopped the randomly/occasionally drop of the 3. column. float.

Maybe it was the <cite> <- "Italic text bug" or the added clear: both on some of the floated elements within the 2. column.

Best regards and thanks for your suggestions.

Bweb

[edited by: Bweb at 8:35 am (utc) on June 5, 2007]