#wd-c div { width: 150px; }
Gives the DIVs a nice, even, box shape.
#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.
#wd-c div { display: block; }
Change display back to the default value for a div, block.
#wd-2 { display: inline; }
Why did nothing happen?
#wd-c #wd-2 { display: inline; }
There we go. Everybody's in the flow, and flowing as designated around each other.
#wd-c #wd-2 { display: block; }
Back to normal now.
#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.
#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)
#wd-c div { border: 2px dotted #000; }
Give each of inner divs a 2 pixel dotted border. What is their offset width now?
#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.
#wd-2 { visibility: visible; }
Set #wd-2's visibility back to the default value, visible.
#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.
#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?
#wd-c #wd-2 { margin: 0; }
Ah, there we go.
#wd-2 { top: 20px; }
We can also move the top of the box to 20px from the top of the viewport.
#wd-2 { bottom: 20px; }
Conflicting styles for top and bottom. Your guess is as good as mine.
#wd-2 { top: auto; }
Resetting top to the magic keyword "auto" lets our bottom rule take effect.
#wd-2 { bottom: auto; }
Reset bottom back to auto and we're back to where we started.
#wd-c #wd-2 { margin: 1em; }
Put back our 1em margin.
#wd-2 { position: static; }
Sets #wd-2 back to the default position, static.
#wd-2 { position: relative; }
Nothing changed. Flow is preserved.
#wd-2 { left: 50px; }
After laying out, #wd-2 is then shifted 50px to left relative to where it would be otherwise.
#wd-2 { top: 50px; }
Relatively positioned boxes may overlap onto other elements.
#wd-2 { position: static; }
Reset position to the default, static.
#wd-c div { display: inline; }
So let's make them layout horizontally. But why is #wd-2 still looking "blocky"?
#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).
#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
#wd-c #wd-2 { clear: left; }
"Content flows down the right side of a left-floated box"...
#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.