From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Floating elements

Floating elements - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Floating elements

“

Of all the different properties involved in CSS layout, perhaps the most important to learn and master is the float property. Floating allows us to alter the normal position of an element by moving it to the leftmost or rightmost edge of its parent. That may not sound like such a big deal, but floating forms the basis for the overwhelming majority of CSS site layouts. Of course there's a little more to it than just moving elements from side to side, and in this chapter we're going to focus on the ins and outs of floating. We're going to start by examining the property in action. So I have the float.htm file open from the 03_01 directory. I'm just going to give you a brief preview of the structure of the page. If I scroll down into the body of it, you'll notice that we've got a couple of introductory paragraphs, and then we have three empty div tags with the classes elements 1, 2 and 3, and that is who we're going to control. Now if I preview this in my browser, you can see kind of…

Contents