Why does a percentage margin cause a new line?

Question

    a 
    b 
    c         


        

      

Answer 1

The link has a left margin of 10%, 10% of how much? The parent element is floated left which means it does not have a width of its own, instead it expands as much as its contents. If you try to imitate how the browser would compute the resulting box and you will find yourself in a fix:

• Let the width of the content (and therefore the container) be 30px
• Add 10% of 30px = 3px left margin to the link
• The resulting width of the container is 30 + 3 = 33px

This creates a loop where margin increases as outer width is increased and outer width increases as the margin is increased (10% of 33px = 3.3px means container width changes from 33px to 33.3px and so forth). For such computations the resulting behavior is undefined (as pointed out by CBroe).

The browser seems to avoid the loop and sticks with the 30px width. The 3px margin introduced after calculation causes the third link to flow into second row. The browser again avoids the loop by sticking with 30px width.