So I was reading the “CSS floats are like an Escalator” article and went to play with with floats in CodePen. Found that floating divs make them hover above the block divs…not like sharing an escalator. They push the text down but are on top of the background of the block divs.
So I kind of thought floats were more like a street with hover cars and played with them like that. For anyone who might find it helpful, here is my CodePen that you can fork and play around with… http://codepen.io/templeme/full/gwLGOo/
I call it “CSS Float Street”. I also play around with what happens with absolute positioning, inline and inline-block elements.
Basic block divs are the "Road Hogs"
Left and Right floats are the "Hover Cars"
Inline divs are the "motorcycles"
Inline-blocks are the “compact” cars
I have ended up with some of the ugliest CSS trying to position elements where I want them and am just trying to really “get” how all of the positioning elements work together. Hopefully some of you will find this useful also.