CSS Layout Cascading Style Sheets

Lesson Overview  In this lesson, you will learn:  float & clear  display & visibility

The float property  Set a block to one side of the page  Possible values: left, right, none  Floating block elements must have a width  The elements after the floating element will flow around it.  The elements before the floating element will not be affected.  If an image is floated to the right, the following text flows around it, to the left. Floating right

float Example Float to the right Float around the image, to the left Must specify width Note the text is below the image to achieve the desired layout. If text was above the image, what would be the result?

The clear property  Elements after a floating element will flow around it. To avoid this, use the clear property.  Turns off float effects on an element  Possible values: left, right, both, none

Comparison With clear Without clear

Exercise  Open boxes.html and boxstyles.css  Use the float property to arrange the boxes like below

Exercise - Solution

The display property  Defines how a certain HTML element should be displayed.  Frequently used values: inline, block, none Normal / list Same list with {display: inline}

The visibility property  Show or hide an element  Possible values: visible, hidden

{ visibility:hidden } vs. { display:none }  {visibility: hidden} hides the element but still takes up the same space  {display: none} hides the element and will not take up any space  See example at y_visibility.asp y_visibility.asp  Both can be used to dynamically show/hide HTML content