Browser variations - screen shots

Here are some screenshots of how browsers treat the code you just saw on Page 5's Appendix 2, where the parent was so narrow that it could scarcely fit 2 children on a line. One example permutation is just below here (there are 16 different permutations). You can compare them with screenshots of where the parent is plenty wide: 


<div>
<img src="../pics/float.png" alt="">
<img src="../pics/float.png" alt="">
<img src="../pics/inline.png" alt="">
<img src="../pics/inline.png" alt="">
</div>
Safari, Opera, iCab, MacIE5:Firefox, Camino, WinIE*
how some browsers exhibit above code how some browsers exhibit above code

Internet Explorer 6

WinIE 6Firefox, Camino
how some browsers exhibit above code how some browsers exhibit above code

IE 6 is exactly the same as Firefox (as far as I see) in all combinations except for the fact that in each case, the parent div recognises the floated children and grows its height to house them. The above pic is an example of the similarities and differences in just one parent child combo of mark up.

When done, return to Page 5 Appendix 2