User:Billw58/Simple no tables experiments

Experiment 1
Even through there is a "container" div for the three floating divs, the container div does not in fact "contain" them.


 * Item 1
 * Item 2
 * Item 3
 * Item 4
 * Item 5


 * Item 1
 * Item 2
 * Item 3


 * Item 1
 * Item 2
 * Item 3
 * Item 4

Experiment 2
Adding a 100% width div with "clear:both" after the three floating divs "expands" the container div to actually contain them and, as you can see, is needed so that following text does not float.


 * Item 1
 * Item 2
 * Item 3


 * Item 1
 * Item 2
 * Item 3
 * Item 4


 * Item 1
 * Item 2
 * Item 3
 * Item 4
 * Item 5

Experiment 3
A 100% width div with "clear:both" is not required between "rows" but is probably good practice.


 * Item 1
 * Item 2
 * Item 3


 * Item 1
 * Item 2
 * Item 3
 * Item 4


 * Item 1
 * Item 2
 * Item 3
 * Item 4
 * Item 5


 * Item 1
 * Item 2
 * Item 3


 * Item 1
 * Item 2
 * Item 3
 * Item 4

Experiment 4 - divs within divs
If you put, for example, two divs within a div that is already 50% of the width of the top level "container" div, the percentage width of those divs is the percent of the div they are in, not the width of the top-level div.


 * Item 1
 * Item 2
 * Item 3


 * Item 1
 * Item 2
 * Item 3
 * Item 4


 * Item 1
 * Item 2
 * Item 3
 * Item 4
 * Item 5


 * Item 1
 * Item 2
 * Item 3
 * Item 4
 * Item 5
 * Item 1
 * Item 2
 * Item 3


 * Item 1
 * Item 2
 * Item 3
 * Item 4

Example 5 - borders
Adding a border seems to mess up the percentage width calculation on some browsers, so you have to reduce the percentage width if borders are included.
 * If you set the width of the two red divs to 50% they will not float beside each other.
 * If you set them both to 49% they will float beside each other.


 * Item 1
 * Item 2
 * Item 3


 * Item 1
 * Item 2
 * Item 3
 * Item 4


 * Item 1
 * Item 2
 * Item 3
 * Item 4
 * Item 5


 * Item 1
 * Item 2
 * Item 3
 * Item 4
 * Item 5
 * Item 1
 * Item 2
 * Item 3


 * Item 1
 * Item 2
 * Item 3
 * Item 4

Example 6 - using tables to format images and captions
Table version:


 * align=center|Before Edit > Remove Audio > Cut
 * [[image:SyncLock1a.png]]
 * align=center|After Edit> Remove Audio > Cut
 * [[image:SyncLock1b.png]]
 * }
 * align=center|After Edit> Remove Audio > Cut
 * [[image:SyncLock1b.png]]
 * }
 * }
 * }

Div version: Before Edit > Remove Audio > Cut After Edit > Remove Audio > Cut

Disadvantages:
 * have to specify width in pixels of text div to match the image - table does this for you
 * can't use ':' to indent the containing div