position_04_floating_a_box_sibling.rml 930 B

12345678910111213141516171819202122232425262728293031
  1. <rml>
  2. <head>
  3. <title>CSS Position: Floating a box - Sibling</title>
  4. <link type="text/rcss" href="../style.rcss"/>
  5. <link rel="source" href="https://drafts.csswg.org/css-position-3/#comparison" />
  6. <link rel="help" href="https://drafts.csswg.org/css-position-3/#comparison" />
  7. <meta name="description" content='Identical to the previous example, save that there is now "sibling" text flowing with the "body" and "outer" text.' />
  8. <style>
  9. body {
  10. font-size: 20dp;
  11. display: block;
  12. background: #ddd;
  13. color: #444;
  14. line-height: 200%;
  15. }
  16. #inner { float: right; width: 130dp; color: blue }
  17. #sibling { color: red }
  18. </style>
  19. </head>
  20. <body>
  21. <p>
  22. Beginning of p contents.
  23. <span id="outer"> Start of outer contents.
  24. <span id="inner"> Inner contents.</span>
  25. <span id="sibling"> Sibling contents.</span>
  26. End of outer contents.</span>
  27. End of p contents.
  28. </p>
  29. <handle size_target="#document"/>
  30. </body>
  31. </rml>