Float

Property Values
float right, left
clear right, left, both


The float property allows you to move the element left or right. The clear property clears the float.



<head>

<style>
.floatl
{
float:left;
}
.floatr
{
float:right;
}
</style>

</head>

<body>
<img src="images/star10.jpg" class="float1"/>
<img src="images/star11.jpg" class="floatr"/>

//clear the float
<br style="clear:both">
</body>

Displays






Let us create a picture of stars all floated to the left.


<head>

<style>
.floatl
{
float:left;
}
}
</style>

</head>

<body>
<div class="float1">
<img src="images/star10.jpg"/>
<img src="images/star11.jpg"/>
<img src="images/star5.jpg"/>
<img src="images/starr.jpg"/>
<img src="images/starb.jpg"/>
<img src="images/starbl.jpg"/>
</div>

//clear the float
<br style="clear:left">
</body>

Displays





Now do the Exercise!