CSS interactive changes in order, with explanations

  1. #wd-c div { width: 150px; }

    Gives the DIVs a nice, even, box shape.

  2. #wd-c div { display: inline; }

    Turn the DIVs into SPANs, basically. The height of #wd-c is equal to the actual height of the text.

  3. #wd-c div { display: block; }

    Change display back to the default value for a div, block.

  4. #wd-2 { display: inline; }

    Why did nothing happen?

  5. #wd-c #wd-2 { display: inline; }

    There we go. Everybody's in the flow, and flowing as designated around each other.

  6. #wd-c #wd-2 { display: block; }

    Back to normal now.

  7. #wd-c div { margin: 1em; }

    Separate each of the inner divs and moves them away from their container by a relative amount on all sides. Font-scale in the browser, and notice that the distance between the divs grows, but the divs themselves do not.

  8. #wd-c div { padding: 10px; }

    Add 10px of padding to each of the inner divs. What is their offset width now? (100 + 10 + 10 + 1 + 1)

  9. #wd-c div { border: 2px dotted #000; }

    Give each of inner divs a 2 pixel dotted border. What is their offset width now?

  10. #wd-2 { visibility: hidden; }

    Makes the second div invisible, but it is still in the flow, so its box is considered in the render calculation.

  11. #wd-2 { visibility: visible; }

    Set #wd-2's visibility back to the default value, visible.

  12. #wd-2 { position: absolute; }

    3 ends up positioned where 2 is as if 2 were not there at all. AKA 2 is "out of the flow". 2 appears to be on top of 3.

  13. #wd-2 { right: 0; }

    Give #wd-2 a right coordinate of 0. This positions its right edge at 0px from the right edge of the viewport. Why is it not touching the viewport?

  14. #wd-c #wd-2 { margin: 0; }

    Ah, there we go.

  15. #wd-2 { top: 20px; }

    We can also move the top of the box to 20px from the top of the viewport.

  16. #wd-2 { bottom: 20px; }

    Conflicting styles for top and bottom. Your guess is as good as mine.

  17. #wd-2 { top: auto; }

    Resetting top to the magic keyword "auto" lets our bottom rule take effect.

  18. #wd-2 { bottom: auto; }

    Reset bottom back to auto and we're back to where we started.

  19. #wd-c #wd-2 { margin: 1em; }

    Put back our 1em margin.

  20. #wd-2 { position: static; }

    Sets #wd-2 back to the default position, static.

  21. #wd-2 { position: relative; }

    Nothing changed. Flow is preserved.

  22. #wd-2 { left: 50px; }

    After laying out, #wd-2 is then shifted 50px to left relative to where it would be otherwise.

  23. #wd-2 { top: 50px; }

    Relatively positioned boxes may overlap onto other elements.

  24. #wd-2 { position: static; }

    Reset position to the default, static.

  25. #wd-c div { display: inline; }

    So let's make them layout horizontally. But why is #wd-2 still looking "blocky"?

  26. #wd-c #wd-2 { display: inline; }

    Oh yeah, specificity... Notice that #wd-c does not take include the heights in paddings or margins for the inline elements (#wd-1,2,3).

  27. #wd-c div { float: left; }

    A floated element is turned into a block display element. Confused? http://www.w3.org/TR/REC-CSS2/visuren.html#floats

  28. #wd-c #wd-2 { clear: left; }

    "Content flows down the right side of a left-floated box"...

  29. #wd-c #wd-3 { clear: left; }

    "Content flows down the right side of a left-floated box"... Notice: The height of #wd-c is 0 because it has no contents in the flow.