Tutorial search
CSS Tutorials
Tutorials
Stuff
Affiliates
Photoshop Templates
Featured Photoshop templates - professional ready to use designs for your next project.
View all templates
CSS Clear property - CSS tutorial
Category: CSS tutorials - Difficulty: 
This property controls how the subsequent elements of floated elements should behave. With this property, the subsequent elements are automatically being up to adjust to the free space that resulted from the box that was set to float to a certain side. It has the values left, right, both or none.
This is the whole principle behind the property clear. Say, if you use the value both for a box, automatically, the top margin border of the said box will be moved to the lower margin border to give way to the floating boxes coming from the top.
<div id="picture">
<img src="URL" alt="Title of URL">
</div>
<h1>Put your Title here</h1>
<p class="floatstop">You create your paragraph here</p>
<img src="URL" alt="Title of URL">
</div>
<h1>Put your Title here</h1>
<p class="floatstop">You create your paragraph here</p>
Now, to prevent the text from floating, this is the command to add:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
float:left;
width: 100px;
}
.floatstop {
clear:both;
}