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 to 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 6 - using tables to format images and captions
Table version:

Before Edit > Remove Audio > Cut

After Edit> Remove Audio > Cut

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