From the course: Making Sense of the CSS Box Model

Unlock the full course today

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

Floating and clearing content

Floating and clearing content - CSS Tutorial

From the course: Making Sense of the CSS Box Model

Start my 1-month free trial

Floating and clearing content

“

- Positioning content relative to its original position, ancestral container, or the viewport is all well and good, but if you want to truly lay out and design a document we need to be able to place boxes next to one another. In traditional CSS, this is done using the float property. Using the float property, we can visually float a box to the left or right allowing for the adjacent content to fill in the newly available space. In traditional printing this is equivalent to text wrapping, but in web design we often use the float property to position multiple boxes in a layout grid. Using the float property is both straightforward and confounding due to its effect on other content. If you float an element, say an image, left and set its width to 50%, the remaining 50% of the space will be filled with the adjacent content. In this situation, the floated box appears on top of the top left corner of the adjacent box and the…

Contents