W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

24 px
Document Window
(0,0) (0, 400)
1
2
3
Start
Beginning of body contents.
of outer contents.
= +12px Inner contents.
End of outer contents.
End of body
= −12px
4
contents.
5
6
7
8
(400, 0) (400, 400)
Note also that had the offset of outer been ’-24px’, the text of outer and the
body text would have overlapped.
9.8.3 Floating a box
Now consider the effect of floating [p. 108] the inner element’s text to the right by
means of the following rules:
#outer { color: red }
#inner { float: right; width: 130px; color: blue }
Text flows normally up to the inner box, which is pulled out of the flow and
floated to the right margin (its ’width’ has been assigned explicitly). Line boxes to
the left of the float are shortened, and the document’s remaining text flows into
them.
118