Floats I: Float placement
A float simulates the placing of an image in text.
Typically an image is moved against either the left or
right margin and the text then flows around the image.
The previous example had a float at the immediate start of the text.
In this example, the float box is placed into the html text
midway down into the contents of the containing block.
Note where FLOAT PLACED HERE appears in the text of the next example.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras sed eros vitae leo suscipit rutrum. Cras et dui.
Nulla leo ante, ultrices vel, dapibus lacinia, hendrerit et, nulla.
In dolor nisi, mattis ac, vulputate in, dapibus ac, diam.
Cras est. Aliquam nisi libero, malesuada eu, lobortis vitae,
ullamcorper et, nunc. Nulla eu ipsum ac urna nonummy mattis. Cras mi.
Quisque mi.
FLOAT IS PLACED HERE IN HTML
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Nunc dapibus, arcu a viverra congue, sapien odio feugiat velit, non luctus magna
ipsum sagittis diam. Nunc metus.
Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam porttitor.
Nulla facilisi. Proin feugiat congue purus.
Integer nec dolor et ipsum condimentum semper. Suspendisse velit
libero, consectetuer vel, pretium in, ultricies a, dolor. Donec sodales.
Mauris eros. Morbi imperdiet elit at orci posuere vulputate.
Praesent feugiat hendrerit elit. Curabitur sit amet mi eu diam commodo
iaculis. In blandit. Morbi posuere quam. Nam fringilla blandit dolor.
Praesent adipiscing pede a dui. Sed in tellus. Donec consectetuer.
Praesent mollis pellentesque enim. Vivamus lacinia lacinia dolor.
Proin non lacus sed velit tincidunt ornare. Duis neque. Morbi sollicitudin.
Aliquam erat volutpat. Morbi augue ligula, rutrum
accumsan, lacinia id, dictum eget, arcu. Phasellus dictum laoreet nisl.
Aenean vitae sem. Suspendisse ante. Praesent leo. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
We now introduce a second left float.
It moves left to contact the first float's right outer edge.
Floats overlap normal flow boxes, but the do not overlap each other (unless
there is a negative margin...).
Note in manner in which the text in the normal flow flows around both boxes.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras sed eros vitae leo suscipit rutrum. Cras et dui.
Nulla leo ante, ultrices vel, dapibus lacinia, hendrerit et, nulla.
In dolor nisi, mattis ac, vulputate in, dapibus ac, diam.
Cras est. Aliquam nisi libero, malesuada eu, lobortis vitae,
ullamcorper et, nunc. Nulla eu ipsum ac urna nonummy mattis. Cras mi.
Quisque mi.
FLOAT IS PLACED HERE IN HTML
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Maecenas sit amet mauris vel lacus commodo
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Nunc dapibus, arcu a viverra congue, sapien odio feugiat velit, non luctus magna
ipsum sagittis diam. Nunc metus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam porttitor.
FLOAT IS PLACED HERE IN HTML
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Nulla facilisi. Proin feugiat congue purus.
Integer nec dolor et ipsum condimentum semper. Suspendisse velit
libero, consectetuer vel, pretium in, ultricies a, dolor. Donec sodales.
Mauris eros. Morbi imperdiet elit at orci posuere vulputate.
Praesent feugiat hendrerit elit. Curabitur sit amet mi eu diam commodo
iaculis. In blandit. Morbi posuere quam. Nam fringilla blandit dolor.
Praesent adipiscing pede a dui. Sed in tellus. Donec consectetuer.
Praesent mollis pellentesque enim. Vivamus lacinia lacinia dolor.
Proin non lacus sed velit tincidunt ornare. Duis neque. Morbi sollicitudin.
Aliquam erat volutpat. Morbi augue ligula, rutrum accumsan, lacinia id, dictum eget,
arcu. Phasellus dictum laoreet nisl. Aenean vitae sem. Suspendisse ante.
Praesent leo. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas.
Suppose, however, you don't want the images to be positioned in that way. Floats
can also float down the page looking for room. This is automatic if there are too many
floats to fit inside the containing box. There wil be a float drop and the float
will move downwards looking for enough room for a placement.
The clear property on a float will cause the float to drop until there are no floats to its
left (if the clear: left is used, there is also a clear: right). Here is the effect
of adding clear: left to the green float.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras sed eros vitae leo suscipit rutrum. Cras et dui.
Nulla leo ante, ultrices vel, dapibus lacinia, hendrerit et, nulla.
In dolor nisi, mattis ac, vulputate in, dapibus ac, diam.
Cras est. Aliquam nisi libero, malesuada eu, lobortis vitae,
ullamcorper et, nunc. Nulla eu ipsum ac urna nonummy mattis. Cras mi.
Quisque mi.
FLOAT IS PLACED HERE IN HTML
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Maecenas sit amet mauris vel lacus commodo
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Nunc dapibus, arcu a viverra congue, sapien odio feugiat velit, non luctus magna
ipsum sagittis diam. Nunc metus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam porttitor.
FLOAT IS PLACED HERE IN HTML
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Nulla facilisi. Proin feugiat congue purus.
Integer nec dolor et ipsum condimentum semper. Suspendisse velit
libero, consectetuer vel, pretium in, ultricies a, dolor. Donec sodales.
Mauris eros. Morbi imperdiet elit at orci posuere vulputate.
Praesent feugiat hendrerit elit. Curabitur sit amet mi eu diam commodo
iaculis. In blandit. Morbi posuere quam. Nam fringilla blandit dolor.
Praesent adipiscing pede a dui. Sed in tellus. Donec consectetuer.
Praesent mollis pellentesque enim. Vivamus lacinia lacinia dolor.
Proin non lacus sed velit tincidunt ornare. Duis neque. Morbi sollicitudin.
Aliquam erat volutpat. Morbi augue ligula, rutrum accumsan, lacinia id, dictum
eget, arcu. Phasellus dictum laoreet nisl. Aenean vitae sem. Suspendisse ante.
Praesent leo. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Just for fun, let's add a right float and see how that works.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Cras sed eros vitae leo suscipit rutrum. Cras et dui.
Nulla leo ante, ultrices vel, dapibus lacinia, hendrerit et, nulla.
In dolor nisi, mattis ac, vulputate in, dapibus ac, diam.
Cras est. Aliquam nisi libero, malesuada eu, lobortis vitae,
ullamcorper et, nunc. Nulla eu ipsum ac urna nonummy mattis. Cras mi.
Quisque mi.
FLOAT IS PLACED HERE IN HTML
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Maecenas sit amet mauris vel lacus commodo
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Nunc dapibus, arcu a viverra congue, sapien odio feugiat velit, non luctus magna
ipsum sagittis diam. Nunc metus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam porttitor.
GREEN FLOAT IS PLACED HERE IN HTML
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Quisque mi.
GRAY FLOAT IS PLACED HERE IN HTML
Maecenas sit amet mauris vel lacus commodo facilisis.
Phasellus ligula eros, posuere vitae, sagittis vitae, venenatis non, augue.
Integer nec dolor et ipsum condimentum semper. Suspendisse velit
Praesent feugiat hendrerit elit. Curabitur sit amet mi eu diam commodo
iaculis. In blandit. Morbi posuere quam. Nam fringilla blandit dolor.
Praesent adipiscing pede a dui. Sed in tellus. Donec consectetuer.
Praesent mollis pellentesque enim. Vivamus lacinia lacinia dolor.
Proin non lacus sed velit tincidunt ornare. Duis neque. Morbi sollicitudin.
Aliquam erat volutpat. Morbi augue ligula, rutrum accumsan, lacinia id, dictum
eget, arcu. Phasellus dictum laoreet nisl. Aenean vitae sem. Suspendisse ante.
Praesent leo. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.
Note well: floats appear top to bottom in the order they appear in the text. If
a float proceeding in the text drops, all floats after in the text will adopt
the vertical of the dropped float for their positioning.