Another block element! (A paragraph)... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non turpis vitae sapien elementum tristique et non lorem. Nulla malesuada dui nec augue ultrices condimentum. Donec ultrices dui mi. In commodo, nisi eu consequat euismod, turpis tellus tincidunt tellus, sed congue mi enim in nisi. Suspendisse scelerisque sagittis sem, et facilisis nibh rhoncus eget. Suspendisse suscipit viverra fringilla. Duis molestie vulputate ipsum, ac pharetra velit sollicitudin a. Maecenas purus purus, pulvinar non tristique a, gravida ac leo. Donec suscipit imperdiet turpis, nec faucibus nunc vulputate a. Suspendisse potenti.
Nulla nec neque metus. Pellentesque metus quam, euismod et feugiat ornare, consequat vel metus. Ut convallis volutpat lacus, at condimentum ligula volutpat non. Donec eros ante, vulputate quis bibendum quis, placerat at turpis. Integer sit amet ante tortor. Donec bibendum iaculis velit vel pellentesque. Fusce id erat a odio mattis bibendum id sed lacus. Phasellus interdum dui ac turpis malesuada adipiscing. Sed id fringilla justo. Suspendisse quam lorem, consequat sit amet lobortis vitae, ullamcorper non dui. Sed lacus magna, faucibus eget mattis vitae, iaculis sed nisi.
Vivamus sed arcu lectus, non molestie purus. Donec quis metus at sapien dictum tincidunt. Aenean congue, dui a aliquet laoreet, turpis enim cursus tellus, ut porttitor orci sem quis nisl. Fusce sit amet dui sed libero rhoncus tempor. Maecenas ac tortor eu orci rhoncus accumsan non id enim. Suspendisse potenti. Pellentesque non ipsum ac arcu molestie ultricies. Praesent vel quam quis turpis imperdiet fringilla tincidunt sit amet elit. Duis ultricies orci vitae ligula facilisis tincidunt. Cras quis tempor odio. Nam fermentum massa non turpis faucibus sed ultrices eros vestibulum. Mauris elementum tristique varius. Sed at urna sit amet arcu euismod pharetra eget eget lorem. Ut vitae ullamcorper nibh.
Donec nibh arcu, luctus eget rhoncus vitae, molestie vitae est. Nullam lacinia semper turpis, eu fermentum sapien ultrices at. Ut et neque in est tempor scelerisque ut quis dolor. Suspendisse vel tristique lacus. Curabitur cursus viverra neque, sed gravida sem ornare non. Integer ornare, justo in venenatis consectetur, metus massa fermentum mi, nec luctus orci arcu quis dui. Nulla mi orci, imperdiet in tempor nec, eleifend eu nisl. Suspendisse potenti.
Fusce nec consequat libero. Maecenas iaculis nibh at leo semper sit amet tristique erat rhoncus. Sed nibh sem, commodo non aliquet eget, auctor et est. Etiam eu viverra nunc. In eu magna ac leo interdum consequat sed et mauris. Duis vehicula tristique pellentesque. Mauris ac odio sed sem porttitor porttitor ac sit amet mauris. Donec pretium, nulla in malesuada suscipit, enim nisl rhoncus purus, sed rhoncus dolor erat porta mauris. Nam magna velit, scelerisque ac varius vitae, facilisis quis nibh. Phasellus eu sapien sem, et mollis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam non nisi vel mi sollicitudin ullamcorper a non est. Praesent ac enim sit amet diam ultrices ultrices eu in libero. Duis dapibus leo vel risus pulvinar quis laoreet leo convallis. Suspendisse arcu est, tempus quis ultricies sed, vehicula et ligula. Aliquam at condimentum dolor. Curabitur in sem rhoncus diam elementum porttitor. Etiam nunc enim, volutpat quis tempor et, ornare sit amet enim. Aenean at metus ac ligula porta condimentum. Nam id suscipit enim.
In order to have the desired visual layout, we use a CSS technique called “floating”. In order to make an element “float” we simply specify that its float property be set to “left” or “right” depending on our needs. Note that this property only applies for block elements.
Floating elements break from the normal layout flow, being “attracted” to either the left or right edge of the parent container. In the process, the block element no longer extends to fill the entire width of the parent container, and because of this unfloated elements, both block and inline elements near to the element (or below it) can “flow” around it, including on the same line. This is not an abstract concept-- in research papers, for example, text flows alongside the outside edge of an inset figure.
When designing layouts, we can leverage this functionality to sit block elements side-by-side one another. An additional aspect of floating elements is that, if a floating element occurs after another floating element, and both are floated to the same side, the second element will sit alongside the first. The non-floated elements will then flow around the outside of the second element. If the first floating element is floated to the side opposite the second, then the nonfloated elements will flow between the two floating elements.
In many cases, it will be necessary to escape from the altered flow set up by floating elements. By setting an element’s “clear” property to “left”, “right”, or “both”, the element will be rendered on the next line instead of beside the previous floating element. If the “clearing” element itself is floated, then then the same layout scheme will develop for this line, otherwise the standard layout scheme will develop (the “clearing” element will be a standard block or inline element).
While this method is one of the few current and valid ways to layout a document without abusing the document’s semantics, it is not without its flaws. Namely, floats were not intended to be used to layout documents-- they were meant to enable developers to place inset figures in their documents, as again, we would expect to see in a standard research paper.
For example, floats will often not play well with the padding and margins set on unfloated elements in their vicinity. To explain this, we must pretend that (1) floating elements are rendered on a plane above nonfloated elements, (2) floating elements can communicate the space they occupy to nonfloated elements (3) nonfloated block elements still occupy the entire width of their container, and (4) even though the floated element is on a higher plane than the nonfloated element, the nonfloated element’s content may not occupy the space occupied by the floated element. With this in mind, setting a margin or padding on a nonfloated block element will thus set it relative to the edges of the parent container (again, the nonfloated block element occupies the entire space of the page). In essence, this is confusing-- this is why it is sometimes difficult to use floats. The takeaway message is that, in order to put spacing between an a floated element and an unfloated element, you must set the spacing on the floated element.
Another key problem is that CSS requires floated elements to have an explicit width. While this can be relative, such as with a percentage, it does mean that the floated element will not automatically resize to fit the size of its contents. You must be able to reasonably estimate the space your content will occupy.
Lastly, a float may need to have an overt height as well. This is because if a non-floated element contains only a floated element, the non-floated element will have a height of 0px. This becomes a problem when attempting to allow your floating element fit the height of its contents. Placing an empty clearing block element below your content will enable the element resize to fit the size of its contents.