O'Reilly logo

The CSS Pocket Guide by Chris Casciano

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

6. Positioning and Floats

Chapter 5 covered how block-level elements are given their shape and size. Before jumping headfirst into creating multicolumn layouts with these blocks, you need to learn how to position elements in your documents in relationship to the other items on a page.

The Document Flow

Reading content in an HTML document, without any JavaScript or CSS applied, is a top-down and left-to-right affair. Block elements take up the entire width of the document and follow one after another with their inline content flowing inside them. Margins and padding may alter the look or spacing some, but they alone do not change the positioning of the elements.

You have three ways to change the default positioning and interaction between elements ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required