CSS Floating
============
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.
Float is very often used for images, but it is also useful when working with layouts.
All CSS Float Properties
------------------------
Property Description Values
---------------------------------------------------------------------------------------------------------------
clear Specifies which sides of an element where other floating elements are not allowed left
right
both
none
inherit
float Specifies whether or not a box should float left
right
none
inherit
Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all
the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
img{float:right;}
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line{clear:both;}
Example 1
---------
In the paragraph below, the image will float to the right. A dotted black border is added to the image.
We have also added margins to the image to push the text away from the image:
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
Example 2
---------
CSS is fun!
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
In the paragraph above, the div element is 120 pixels wide and it contains the image.
The div element will float to the right.
Margins are added to the div to push the text away from the div.
Borders and padding are added to the div to frame in the picture and the caption.
Example 3
---------
This is some text.
This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
In the paragraph above, the first letter of the text is embedded in a span element.
The span element has a width that is 0.7 times the size of the current font.
The font-size of the span element is 400% (quite large) and the line-height is 80%.
The font of the letter in the span will be in "Algerian".
Example 4
---------
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
Example 5
---------
"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)
Free Web Building Tutorials
test1
test2