Floating elements (floats) - CSS Tutorial 13

Floating elements (floats)

An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right or to the left in a document (or the containing box) (see lesson 9 for a description of the Box model). The following figure illustrates the principle:

If we for example would like to have a text wrapping around a picture, the result would be like this:

How is it done?

The HTML code for the example above, look as follows:

 
 <div id="picture">
  <img src="bill.jpg" alt="Bill Gates">
 </div>

 <p>causas naturales et antecedentes, 
 idciro etiam nostrarum voluntatum...</p>
 
 

To get the picture floating to the left and the text to surround it, you only have to define the width of the box which surrounds the picture and thereafter set the property float to left:

 
 #picture {
  float:left;
  width: 100px;
 }
 
 

The Result:

A floating image

Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.
Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.
Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure.
Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror.
Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema.

Another example: columns

Floats can also be used for columns in a document. To create the columns, you simply have to structure the desired columns in the HTML-code with <div> as follows:

 
 <div id="column1">
  <p>Haec disserens qua de re agatur
  et in quo causa consistat non videt...</p>
 </div>

 <div id="column2">
  <p>causas naturales et antecedentes, 
  idciro etiam nostrarum voluntatum...</p>
 </div>

 <div id="column3">
  <p>nam nihil esset in nostra 
  potestate si res ita se haberet...</p>
 </div>
 
 

Now the desired width of the columns is set to e.g. 33%, and then you simply float each column to the left by defining the property float:

 
 #column1 {
  float:left;
  width: 33%;
 }

 #column2 {
  float:left;
  width: 33%;
 }

 #column3 {
  float:left;
  width: 33%;
 }
 
 

The Result:

Columns

Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.

Brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum. Si meliora dies, ut vina, poemata reddit, scire velim, chartis perficit quotus pretium quotus arroget annus. Scriptor abhinc reddit m







float can be set as either left, right or none.

The property clear

The clear property is used to control how the subsequent elements of floated elements in a document shall behave.

By default, the subsequent elements are moved up to fill the available space which will be freed when a box is floated to a side. Look at the example above wherein the text is automatically moved up beside the picture of Bill Gates.

The property clear can assume the values left, right, both or none. The principle is, if clear, for example, is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above.

 
 <div id="picture">
  <img src="bill.jpg" alt="Bill Gates">
 </div>

 <h1>Bill Gates</h1>

 <p class="floatstop">causas naturales et antecedentes, 
 idciro etiam nostrarum voluntatum...</p>
 
 

To avoid the text from floating up next to the picture, we can add the following to our CSS:

 
 #picture {
  float:left;
  width: 100px;
 }

 .floatstop {
  clear:both;
 }
 
 

The Result:

A floating image

Bill Gates

Iste quidem veteres inter ponetur honeste, qui vel mense brevi vel toto est iunior anno. Utor permisso, caudaeque pilos ut equinae paulatim vello unum, demo etiam unum, dum cadat elusus ratione ruentis acervi, qui redit in fastos et annis miraturque.

Ennius et sapines et fortis et alter Homerus, ut critici dicunt, leviter curare videtur, quo promissa cadant et somnia Pythagorea.Naevius in manibus non est et mentibus haeret paene recens? Adeo sanctum est vetus omne poema. Ambigitur quotiens, sit prior, Pacuvius docti.
Hos ediscit et hos arto stipata theatro spectat Roma potens; habet hos numeratque poetas ad nostrum tempus Livi scriptoris ab aevo, si nimis antique, si dure.
Interdum volgus rectum videt, est ubi peccat. Si veteres ita miratur laudatque poetas, ut nihil anteferat, nihil illis comparet, errat. Si quaedam nimis antique, si peraque dure dicere credit eos, ignave multa fatetur, et sapit et mecum facit et Iova iudicat aequo.Non equidem insector delendave carmina Livi esse reor, memini quae plagosum mihi parvo Orbilium dictare; sed emendata videri pulchraque et exactis minimum distantia miror.
Inter quae verbum emicuit si forte decorum, et si versus paulo concinnior unus et alter, venditque poema.

Summary

Floats are useful in many situations and will often be used together with positioning. In the next lesson we will take a closer look at how to position a box, either relative or absolute.

Browse More Articles

Tweet

Written by Unknown

Unknown is one of the Team Member of Programmer vs Hacker. He has written many articles on this website and is a patner of this website.