Web Design with HTML and CSS

152

A brief history of layout techniques on the web

Web Design with HTML and CSS Digital Classroom

If you have multiple fl oated elements within the same element, they align beside each other.

This behavior is often used for common web page features such as horizontal menus or

image galleries.

Understanding how multiple fl oated elements interact with each other is crucial to using

them eff ectively. Consider the following example: there are six images inside a div that is

360 pixels wide. Each image is 50 pixels wide, and also has 10 pixels of margin space (5 on

the left and 5 on the right). By adding the values, you can see that 6 × 50 is 300 pixels for the

images and 6 × 10 is 60 pixels of margin. Consequently, the images plus the margin fi t inside

the div, with a total width of 360 pixels.

If you have defi ned an explicit width for the container, adding another image causes the new

image to break to the next row.

This behavior might work well for a thumbnail image gallery, but not for navigation.

You will learn more about using fl oats in the next exercise when you build a two-column layout.