Member Avatar for PsychicTide

Just when you think your done, you find out you have to cross code for IE6... what a pain.

I'm working on a site that has a number of divs inside a container div. filler div floated left, list div floated left (display:inline-block), right fill floated left, and a large div floated right.

This looks great on IE7 and mozilla FF, but IE6 throws it all off by adding very large gaps in between just the three floated left divs (left fill, list div, right fill). and the rest of the page is in place.

If you have a sec, take a look at www.screenworksonline.com... CSS is /main.css.

Hopefully someone has encountered this before... maybe I forgot to reset an attribute?

  • 1 Contributor
  • 2 Replies
  • 113 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by PsychicTide

Dani AI

Generated

This is a common IE6 quirk and found the straightforward fix: giving each floated element an explicit width. That works because many IE6 float/layout problems stem from how the browser calculates element sizing when an element does not have an explicit layout. Triggering that layout (by setting a width, height, or forcing hasLayout) stabilizes the float placement.

Practical options that work in IE6:

  • Give each floated box an explicit width so the browser can lay them out predictably.
  • Trigger hasLayout on the float or its container (commonly zoom:1 in IE) when explicit widths are not desirable.
  • Avoid mixing display:inline-block tricks with floats in IE6; inline-block on block elements needs hacks there and can interact badly with floats.

Example IE6-only approaches (use conditional comments so modern browsers are untouched):

<!--[if lte IE 6]>
<style>
/* either set explicit widths */
.container .left, .container .list, .container .right { width:150px; }

/* or trigger hasLayout if you need fluid widths */
.container .left, .container .list, .container .right { zoom:1; display:inline; }
</style>
<![endif]-->

Quick checklist when floats misbehave in old IE:

  • Sum of widths + padding + borders + margins must be less than container width.
  • Check for accidental whitespace or inline elements between floated items if using inline-block.
  • Use an IE6 VM or service (or conditional CSS) to test fixes without affecting modern browsers.
  • Prefer conditional comments or targeted rules so non-IE browsers remain standard-compliant.

This explanation expands on 's finding: explicit widths are the simplest reliable fix, while zoom:1 or display tweaks are useful when fixed widths are not an option.

Member Avatar for PsychicTide

once again... this is a fine example of me just not thinking.

I had a friend take a look at this and pointed out I need to have every multi-floated div with a fixed width for IE6... I added the width to each, and problem solved. just in case you guys were wondering (chances are you weren't). :)

commented: Thank you for sharing +10
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.