CSS Float (Floating Multiple Elements)

5. Summary

Floating is an extremely powerful technique that you will likely end up using quite a bit - it quickly becomes essential when you want to do more detailed layouts. However, it does come with a small price of added complexity. We have already shown you a couple of the "extraordinary" behaviors you will run into when using floats and there are more of them out there.

The limitation to using floats for columns is that it is dependent on the order of the elements in the source document. The floated element must appear before the content that wraps around it, and your source may not always be ordered conveniently.

Box sizing property is used to change the height and width of an element.

References

Terry Felke-Morris(2015). Page Layout. In Terry Felke-Morris (Seventh Edition), Web Development and Design Foundations with HTML5 (267-312). England, Pearson

Jennifer Niederst Robbins (2012). Floating and Positioning. In Jennifer Niederst Robbins (4th Edition), Learning Web Design A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics (341-371). Canada, O’Reilly Media, Inc.

Noah Stokes (2011, March 08). CSS Float 101. Retrieve from https://alistapart.com/article/cssfloats-101/

Patrick Young. HTML & Cascading Style Sheets. (n.d.) Retrieve from https://emunix.emich.edu/ ~evett/E-Commerce/assign1/HTML_CSS.html

Build Horizontal Navigation Bar with Floating List Items in CS3 (n.d.). Retrieve from https:// www.tutorialspoint.com/build-horizontal-navigation-bar-with-floating-list-items-in-css

CSS3-Box Sizing (n.d.). Retrieve from https://www.tutorialspoint.com/css/css3_box_sizing.htm