HTML + CSS step by step (2014)

Chapter 7: How To Position Content

“How you look at it is pretty much how you'll see it”- Rasheed Ogunlaru

In this chapter, you will learn about how to position content, including:

• Floats

• Type of floats

CSS allows you to bring structure and to create a flow in your content. You can position the content in different ways. This chapter explores how you can position the content.

Floats

The float property can be used to position content on the HTML document. The good thing about this property is that it is quite versatile. You can utilize this property by removing an element on a page and repositioning it horizontally (to the left or right) and the rest of the contents will “float” and rearrange themselves with it. You can use it on more than one element simultaneously, too.

With this property you can adjust, fix, modify or create the layout of your webpage. Look at this example and try using it in an HTML document to familiarize yourself with floats:

img {

float: left;

}

Try playing around with floats on the following website: http://codepen.io/shayhowe/pen/utfmw.

Types Of Floats

There are two types of floats: clearing and containing floats. Clearing floats are used to prevent the float property from wrapping floated elements and to clear them instead. There are 3 values for clearing floats: right, left and both. You can clear the floats on the right or the left with the first two values. However, if you would like to clear floats on both sides go for “both” instead.
div {

clear: left;

}

Containing floats work pretty much the same way that clearing floats do but the advantage of the float is that it ensures the styles aren’t changed or affected. The floats are contained in the parent element. The elements inside the parent element are contained and elements outside the parent element are left unaffected. If you want to read more about these, click on the following link: http://css-tricks.com/all-about-floats/.

Summary

This chapter gives you a brief introduction to certain properties that will help you position the content on your HTML document. The float property is one of the most useful properties for repositioning content on a webpage.