Home/ Questions/Q 512167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T07:17:32+00:00

IE6 is giving me issues of course. I’m having problems with my layout using

  • 0

IE6 is giving me issues of course. I’m having problems with my layout using percents. The code I have looks like the following: 

    <div style="width: 92%; margin-left: 4%; margin-right: 4%; background-color: red; height: 20px;">
        <div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 23%; background-color: blue; height: 20px;"></div>
        <div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 73%; background-color: yellow; height: 20px;"></div>
    </div>

So the inner two divs both have right and left margins of 1%, so a total of 4% of margins. Then the widths are 23% and 73% for a total of 96% width for the inner divs. So adding the margins and widths together, we come out to a nice 100%.

But IE6 for some reason doesn’t agree, and breaks my two inner divs and places each on a new line. Does anyone know why? It works for every other browser. I took care all of the IE6 bugs I could think. The display: inline should take care of the double margin bug, and it doesn’t appear to be an issue.

Here’s the url if anyone wants to see it in action: http://dev1.twinmed-dev.com/test.html

Thanks for any help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    IE6 is no good at working out percentages is about the size of the problem:

    http://www.positioniseverything.net/explorer/percentages.html

    You’ll notice that if you slowly resize the window in IE6 and the page reflows, every now and again your 2 divs will magically sit on the same line as you wanted.

    I’ve always found a good reliable workaround to this issue (aside from not using percentages) is to make sure that the total is always 99%. Obviously that can compromise the layout sometimes, but using a conditional-commented IE6 only rule minimises the effect.

    • 0