1. Open this example in both IE and FireFox to compare the differences

  2. Pretend the grey boxes below represent the main display area of a site

  3. The grey boxes SHOULD stay at 500 pixels in every example, in IE and Firefox

  4. Add a 100% wide DIV, offset by a 20% left margin:
    (works in IE but fails in FireFox when it adds the margin to the width, for 120%)

    width=500px 
    <div style="margin-left: 20%; width: 100%;" >
     


  5. Remove the WIDTH=100%
    (now it works in both Firefox and IE, but we haven't added the TABLE yet...)

    width=500px 
    <div style="margin-left: 20%" >
     


  6. Now add a 100% wide TABLE to the DIV:
    (breaks in IE when the TABLE references the width of the grey box instead of the yellow.)

    width=500px 
    <div style="margin-left: 20%" >
    <table width=100% >
     


  7. Fix IE by adding WIDTH:100% to the DIV containing the TABLE:
    (breaks in Firefox because the DIV is now adding its margin AND width again for 120%)

    width=500px 
    <div style="margin-left: 20%;width:100%" >
    <table width=100% >
     


  8. Use IE's exclusive CSS "expression" syntax, allowing IE to utilize the WIDTH=100% while Firefox ignores it (finally works in both IE and Firefox):

    width=500px 
    <div style="margin-left: 20%;width:expression('100%')" >
    <table width=100% >