Cascading Style Sheets/Floating elements
From WikiKnowledge
Contents |
[edit] float
Values are:
| left | Float the element left. |
| right | Float the element right. |
| none | Don't float the element. |
| inherit | Inherit this setting. |
The margins of floated elements never collapse, and a floated element is always treated like a block element. When an element is floated, it only affects the contents of the following element and not the margins, borders or padding of elements. Also floated elements float outside of their containing element. So for example, the following HTML
<div style="border: 5px solid blue; background-color:lightblue; "> <div style="margin:2px; border: 5px solid red; height:20px; width:20px; float:left;"> </div> </div>
will look lake the picture on the right. Note that Internet Explorer 6 will display this incorrectly. The code creates a blue box, with a red box inside. However because the red box is floated it hangs outside the blue box. Now that there is nothing inside the blue box is closes showing only the blue border.
[edit] clear
Values are:
| none | |
| left | Clear all left floated elements. |
| right | Clear all right floated elements. |
| both | Clear both left and right floated elements. |
| inherit | Inherit this setting. |
The clear setting can be used to fix the problem with the blue box closing in the code above.
<div style="border: 5px solid blue; background-color:lightblue; "
<div style="margin:2px; border: 5px solid red; height:20px; width:20px; float:left;"> </div>
<div style="clear:both;"> </div>
</div>
By adding an empty div after the floated element and giving it a clear both setting, you can force the blue box to open around the red box.
