Appendix 1 to page 5

When different types of children mix

We look into how floats and inlines interact a bit more on this page. Take the simplest set of cases that can deliver inlines interleaved with floats (notice the plural) in a barely manageable number of cases that can be exhaustively listed. The order in the source is displayed in a note under each case. Following is where all children could easily fit on one line and in Safari, for example, do in fact fit on one line.

Look at these in the browser you are in first and then either look at it in other browsers or see the screenshots from various browsers.

After you have looked at this page, you can see them all again in an extreme context where the parent is not wide enough to generally fit more than one child on a line and certainly not two. There are widths in between that could be shown but let us rest content with the two extremes. The narrow parent will be on the next page of this appendix.

Fig 1: floatA floatB inlineA inlineB

Fig 2: floatB floatA inlineA inlineB

Fig 3: floatA floatB inlineB inlineA

Fig 4: floatB floatA inlineB inlineA

Fig 5: inlineA inlineB floatA floatB

Fig 6: inlineB inlineA floatA floatB

Fig 7: inlineA inlineB floatB floatA

Fig 8: inlineB inlineA floatB floatA

Fig 9: inlineA floatA inlineB floatB

Fig 10: inlineA floatB inlineB floatA

Fig 11: inlineB floatA inlineA floatB

Fig 12: inlineB floatB inlineA floatA

Fig 13: floatA inlineA inlineB floatB

Fig 14: floatA inlineB inlineA floatB

Fig 15: floatB inlineA inlineB floatA

Fig 16: floatB inlineB inlineA floatA

You can either look at it above in other browsers or see the screenshots from various browsers.