The main content will go here - this has a width of 85% and is floated left. Because it appears in the html after the first float, it comes in to the right of the first item; as noted in the Powerpoints, this occurs if the combined width does not exceed the width of the parent element, which in this case is the default 100%.

Navigation links will go here; this is floated left

This too is floated left, but this one is not given a width. Because it is a block level element, its default width is the width of the page, and thus the combined width of this and the navigation to the left exceeds the width of the parent element and thus the excess content wraps into the next row as one can see when viewed in a browser.

While floats have been used for layout, newer tools like Flexbox and Grid are becoming more popular. These are discussed in Chapter 16 of the Learning Web Design and in ITD 210.

Revised: November 18, 2021