1. Ch 11 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach

2.  Many sites you visit include a menu or sidebar

3.  There are many ways to control layout in a web page  Absolute positioning  Using negative margins  Floating positioning.  What is Document Flow ?  All elements flow in sequence relative to each other.  First element first through to the last  Simple control via the use of block and inline  In western languages we read from top left across and down the page towards the bottom right  If an element does not fit on the remainder of a line it drops or reflows to the next line.  Using a floating scheme allows for this natural document flow to be reorganised

4.  How is a float defined by W3C:  http://www.w3.org/TR/CSS21/visuren.html#floats http://www.w3.org/TR/CSS21/visuren.html#floats A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left- floated box and down the left side of a right-floated box. A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is aligned with the top of the current line box. A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left- floated box and down the left side of a right-floated box. A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is aligned with the top of the current line box.

5.  Chapter 10 explained that elements are block-level and as a result force a newline after they close.  Using the float property allows the relationship to be modified.

6.  There was enough space across the top to allow the boxes to sit beside each other, but the block-level rule meant they flowed down the page.  Adding float:left produces

7.  Adding float:right produces  Note the order of the divs

8.  Adding a mix of float has the following effect:  Note the order of the divs

10.  Adding a menu in a sidebar:

11.  Adding a menu in a sidebar:

13.  It is important to specify the correct widths

15.  What about the height of the sidebar ?  A block-level element will only take up the space it needs.  As a result the background colour is showing.

16.  Totaling the space for each element means you are sure that fit together.  Remember that even a has the following:

17.  Totaling the space requirements: #content{ width: 510px; padding: 10px 20px; background-color: #999999; float: left; } #sidebar{ width: 200px; padding: 10px 20px; background-color: #666666; float: right; }

18.  Totaling the space requirements: #container{ width: 790px; …. } #content{ width: 510px; padding: 10px 20px; background-color: #999999; float: left; } #sidebar{ width: 240px; padding: 10px 20px; background-color: #666666; float: right; }

19.  Vertical distance between elements  Applying a design rule for you

20.  Adding the class to the image:

21.  Adding a combination to #content float:left; clear:both; overflow:auto ;

22.  Background shows when the column is too short.

23. Create an image of the width and repeat it #container { …. background-image: url(); background-repeat: repeat-y; ….}