Bottom margin of float disappears in IE6

Discussion in 'CSS' started by djo624, Jun 16, 2006.

0
  1. #1 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<style>
div.outer {
   padding: 0;
   margin: 5px;
   border: 5px solid red;
   float: left;
   /* width: 80px; */
}

div.inner {
   float: left;
   height: 50px;
   width: 50px;
   border: 5px solid blue;
   padding: 5px;
   margin: 5px;
   display: inline; /* Fixes double margin bug in IE */
}

</style>

<div class="outer">
   <div class="inner"></div>
</div>
    HTML:
    Everything looks fine in Firefox, but on IE 6, for some reason, the bottom border of the inner div touches the border of the outer div, despite the 5 px margin. Even more bizarre, the problem disappears if I uncomment the width: 80px; line, where 80px is the sum of the inner div's content width, borders, padding, and margins, the problem disappears.

    If I set the width to anything less than 80px, it appears as expected. If i don't set the width or I set the width greater than 80px, the bottom margin disappears.

    Any ideas as to why this is happening and how I can correct it?

    Thanks,
    Dan
     
    djo624, Jun 16, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    My first thought was collapsed margins, which IE handles very poorly where elements have layout (floats, in IE, hasLayout=true). But, a control element put immediately below the nested floats proved that wasn't the case. I have no clue what the trigger is here. As a work-around, put padding-bottom in the .outer div in place of margin-bottom in .inner div.

    cheers,

    gary
     
    kk5st, Jun 17, 2006 IP
  3. djo624

    djo624 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    unfortunately, in my actual design i have many of these inner divs inside the outer div, which are separated from each other by their margins. i guess i could get rid of the margin-bottom and double the margin-top for inner, then add some padding to the bottom of the outer div. but i still can't figure out why this is happening, and it might become a bigger problem later on as my layout becomes more complicated. this is pretty simple markup, i feel like this should be a special case of some well-known ie bug...any ideas?

    (sorry about the cross-post. didn't know what that meant or that it was considered impolite. my apologies.)
     
    djo624, Jun 17, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Perhaps if you would tell or show us what you're trying to accomplish, rather than focus on what you think is the solution, we could find a better way.

    For example, the nested floats have no apparent purpose. They may be a part of the solution, or maybe not.

    cheers,

    gary
     
    kk5st, Jun 17, 2006 IP
  5. Colleen

    Colleen Illustrious Member

    Messages:
    6,777
    Likes Received:
    725
    Best Answers:
    1
    Trophy Points:
    430
    #5
    The outer div needs the 5px of padding to achieve the results you're looking for.

    Use this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<style>
div.outer {
   padding: 5px;
   margin: 5px;
   border: 5px solid red;
   float: left;
   /* width: 80px; */
}
 
div.inner {
   float: left;
   height: 50px;
   width: 50px;
   border: 5px solid blue;
   padding: 5px;
   margin: 0;
   display: inline; /* Fixes double margin bug in IE */
}
 
</style>
 
<div class="outer">
   <div class="inner"></div>
</div>
    HTML:
     
    Colleen, Jun 17, 2006 IP