Browser variations - screen shots

Here are some screenshots (cut off at right, no need to see the whole width of parent here) of how browsers treat the code you saw on the Appendix 1 to page 5 (from which you have just come), essentially the different orders of 2 floated and 2 inline pics, one combination, as simplified example:


<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
how some browsers exhibit above code how some browsers exhibit above code

Internet Explorer 6

how some browsers exhibit above code
IE 6 is exactly the same as Firefox 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.

When done, return to 'live' version of this page