Why Do My Legs Ache In Bed

Float in Float IE6 margin wrong inherted div width bug - IE error: Inherited Div width will be floated margin wrongly assumed

Note
products that this bug is NOT the known and frequently occurring IE Double Margin Bug and IE Inherited Margins on Form Elements Bug!

problem

When a website with valid XHTML / CSS and floated levels (DIV elements that float in float) is the Internet Explorer 6, the margin width percentage of the parent element taken wrong, and therefore calculated wrong!

The IE6 browser calculates the percentage of the margin from the top division, ie. 100% of the total width (and not from the top Parent DIV (DIV Parent)! Ie in the planes is not the width of the margin more correctly inherited. When using the padding does not, however, this is the MARGIN.

valid source code, but are unable to view in IE6

following code, we have applied to our example, which produces the faulty float. It floated the box 3 is always down (while the whole thing has nothing to do with the Double Margin bug) as shown on the following screenshot is:

 
  \u0026lt;body> 
 \u0026lt;div id = "page" > 
 \u0026lt;div id="content" style="background-color: yellow;">  
 <div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;"> 
   <div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;"> 
     <p>Box 1</p> 
   </div> 
   <div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;"> 
     <div> 
       <p>Box 2</p> 
     </div> 
 \u0026lt;/ div> \u0026lt;div 
 id="cell1574" class="cmsCell" style="width: 73.93%; background-color:#CC9966;"> 
 \u0026lt;p> Box 3 \u0026lt;/ p> 
 \u0026lt;/ div> 
 \u0026lt;/ div> 
 \u0026lt;/ div> 
 \u0026lt;/ div> 
 \u0026lt;/ body> 
  

The matching Head Style Sheets are unchanged on all the examples on this page!

 
  \u0026lt;style type="text/css"> 
 
 body div.cmsGroup 
 {float: left; 
 display: inline;} 
 
 
 body div.cmsCell 
 {float: left; 
 display: block important;} 
 
 
 \u0026lt;/ style>  
 

Fix / Solution: It is

obvious that the cell with ID cell3467 and defined: The "margin-right 3.09%" is calculated wrong - namely, real 16 pixels instead of 8 - "width DIV" and on the top base-value falls back (100% instead of 50 %). Here the distance between them 50% of the group # group1573 is ignored! Thus we have this group again after a layer (DIV) with a jump of 100% (width: 100%) define the proper width of real 3.09% (8 Px) to obtain.

It must now be created within the group once a plane with the following attributes:

\u0026lt;div style="width: 100%"

see the screenshot from this follows:

provides the complete and efficient source of this follows:

 
 \u0026lt;body> 
 \u0026lt;div id="page"> 
 \u0026lt;div id="content" style="background-color: yellow;"> 
 \u0026lt;div id = "group1573" class = "cmsGroup"  style="width: 50%; padding: 0%; background-color:red; display:block;"> 
         <!-- Bugfix for IE6 related margin width --&gt 
      <div style="width: 100%"> 
         <!-- E: Bugfix --&gt 
        <div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;"> 
             <p>Box 1</p> 
           </div> 
           <div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;">  
             <div> 
               <p>Box 2</p> 
             </div> 
           </div> 
           <div id="cell1574" class="cmsCell" style="width: 73.93%; background-color:#CC9966;"> 
             <p>Box 3</p> 
           </div> 
         <!-- Bugfix for IE6 related margin width --&gt   
         </div> 
         <!-- E: Bugfix --&gt 
    </div> 
 \u0026lt;/ Div> 
 \u0026lt;/ div> 
 \u0026lt;/ body> 
 

proof of IE6 Float Margin Bug

following change shows the incorrect calculation of Margin Width. We have adapted the box 3 instead of 73.93% to 50%, so everything fits in the width of 99.6% of the group.

On this screenshot you can see the error: this

The Source:

 
 \u0026lt;body> 
 \u0026lt;div id="page"> 
 \u0026lt;div id = "content" style = "background-color: yellow;">  
 <div id="group1573" class="cmsGroup" style="width: 50%; padding: 0%; background-color:red; display:block;"> 
     <div id="cell2352" class="cmsCell" style="width: 99.6%; background-color:yellow;"> 
       <p>Box 1</p> 
     </div> 
     <div id="cell3467" class="cmsCell" style="width: 22.58%; float: left; background-color: green; margin-right: 3.09%;"> 
       <div> 
         <p>Box 2</p> 
       </div> 
 \u0026lt;/ div> \u0026lt;div 
 id="cell1574" class="cmsCell" style="width: 50%; background-color:#CC9966;"> 
 \u0026lt;p> Box 3 \u0026lt;/ p> 
 \u0026lt;/ div> 
 \u0026lt;/ div> 
 \u0026lt;/ div> 
 \u0026lt;/ div> 
 \u0026lt;/ body> 
 

.