HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 20: Floating elements introduction and positioning part 2

Floating elements allows you to pin elements to different parts of the screen. It also makes it possible to display block elements side by side. If you wanted to float one of your elements you would have to add a width: value; and a float: value; to the CSS rule for the element you want to affect. The values for the float property are none, left, right, initial, and inherit. The main one we'll be using in this book is left. Know that floating an element will remove it from the natural flow that we talked about earlier. And the browser will kind of ignore the elements that you float. This is how we could display block elements side by side. Because if you floated an element to the left for example. The browser would take the very next element and display it side by side with the floated element as long as there is enough room to the right . It's kind of like the element is invisible to the browser in a way. If you had some elements floated left and some floated right on your page when you run it in your browser and re-size your screen these elements will stay pinned in the area or direction that you told them to. Also your browser will not automatically add margins to your floated elements. You need to add them yourself. There are many benefits to the float system. Floating is a little bit tricky but we'll clear up a lot of questions in our website layout.

Quiz Chapter 20

1.Name two properties and values that you can use to float an element?

2.What does floating an element do to it?

3.What is a benefit of floating block elements?

4.What happens if you re-size your web page that contains floated elements?

5.What is the natural flow?