Back
Next
An element can be floated to the right or to left by
using the property float in Cascading Style Sheet. 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)
How is it done?
The HTML code for the example above, look as follows:
<div id="picture">
<img src="ggl.jpg" alt="CSS Tutorial, Global Guide Line">
</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 with
Cascading Style Sheet, 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;
}
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>You are learning CSS Floating Elements
at CSS Tutorial of Global Guide Line...</p>
</div>
<div id="column2">
<p>This is second column of CSS Tutorial...</p>
</div>
<div id="column3">
<p>This is third column of CSS Tutorial...</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%;
}
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
Cascading Style Sheet:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Back
Next
| 
Home 