Using floating boxes
A floating box is a container for content around which other content flows. The effect of a floating box is to “push” the content following it to the side. In the example below, the dark text is inside a floating box; the light gray text is in paragraphs before and after the floating box. A gray border has been added to the floating box to highlight its boundaries.
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. This text is in a floating box. Any content that follows a floating box “flows” around it, as a stream flows around a rock. Of course, rocks don’t float, unless they’re very small, but what can you do.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
|
A floating box example |
Floating boxes can be aligned on either the left or the right side, but not the middle, of the parent containerThe element, frame, or window that immediately contains the current element.. Note that a floating box only “pushes aside” content that follows it, not content that precedes it.
In this section
Creating and positioning a floating box
Adding content to a floating box
Setting a floating box’s initial visibility
Setting a background color or image on a floating box
Setting borders, margins, and padding for a floating box