1. CSS Layout Cascading Style Sheets

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

3. 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

4. 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?

5. 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

6. Comparison With clear Without clear

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

8. Exercise - Solution

9. 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}

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

11. { 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 http://www.w3schools.com/css/css_displa y_visibility.asp http://www.w3schools.com/css/css_displa y_visibility.asp  Both can be used to dynamically show/hide HTML content