Yes, it's IE float drop again

Question

I have read the messages here until my head is spinning. I
cannot detect
an underlying principle that one can refer to when trying to
prevent
this from happening in every case--it seems so situation
dependent. Or
what I have read is over my head.
I'm getting it at all of the pages of this site:
http://www.eastbranch.net/process.html
Al of the pages use the same underlying structure, so I'm
hoping that if
I fix it for one I can fix it for all.
It doesn't happen in any Macintosh browser. If the page is
too wide--and
it almost always is--I get a horizontal scrollbar. I know.
Client
insists. He doesn't mind the horizontal scrolbar for people
who don't
use huge windows like he does, but I think the float drop is
a more
serious problem and I need to fix it.
Can someone point me to a resource, ideally titled
"Preventing IE float
drop--every time--for dummies."
James M Shook

Answer 1

"James Shook" <[email protected]> wrote in message
news:gl35os$hca$[email protected]..
> Thierry wrote:
>
>> It is the content of #rightWrapper that makes that
container drop,
>> because it - wrongly - increases its width.
>> The easy fix is to prevent such thing is to use the
following:
>>
>> #rightWrapper {overflow-x:hidden;}
>
> OK, that sort of works, but it cuts off the content on
the right. Do I
> have to size rightWrapper to the size of the widest
content it will
> contain?
Sorry James,
I didn't look at it very well. Actually, I didn't even check
in FF, that's
why I was suggesting to use "overflow-x" ;-).
It turns out that indeed there are maths errors.
An easy way to find out about this kind of issue is to open
firebug and to
click on the "layout" tab.
There you can see that:
- #pageWrapper width is: 915px
- #leftWrapper width is: 70 + 478 + 15 (563px)
- #rightWrapper width is: 463px
So to avoid a float drop you would have to set the width of
#pageWrapper to
be at least 1026px
To contain everything within 915px you need to reduce by a
total of 111px
the inner containers (width or padding will do).
As a side note I would *remove* the table you're using for
the thumbnails as
these are easily styled without the need of so much markup
(which also allow
for more flexibility - showing them on 3 columns instead of 4
for example).
Thierry | Adobe Community Expert | Articles and Tutorials ::
http://www.TJKDesign.com/go/?0
Spry Widgets |
http://labs.adobe.com/technologies/spry/samples/
[click on
"Widgets"]
Spry Menu Bar samples |
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html