Frontend Engineering, Volume II
CSS: Chapter 3 Companion—Positioning
© 2013, Martin Rinehart
One of our topics: wrapping text and divs around an image.
History
The history of CSS, by founders Lie and Bos: http://www.w3.org/Style/LieBos2e/history/Overview.html.
Quick summary, CSS 2 history: http://www.blooberry.com/indexdot/history/css2.htm.
CSS 2, as seen in 2003: http://www.daaq.net/old/css/index.php?page=css+history&parent=using+css.
Normal Flow
The W3C specification for CSS 2.1: http://www.w3.org/TR/CSS2/visuren.html.
Additional W3C specification for CSS 2.1: http://www.w3.org/TR/CSS2/visudet.html.
A "Quick Tip" that's reasonably thorough: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-utilizing-normal-document-flow/.
Inline elements in normal flow: https://developer.mozilla.org/en-US/docs/HTML/Inline_elements.
Block elements in normal flow (includes HTML5) https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements.
Centering
This shouldn't be necessary, but it is: http://css-tricks.com/centering-css-complete-guide.
Photos for Free
The best way to get photographs for your site is to take them yourself. Then you are sure you have the rights you need. (People in your shots? Look into model releases. Generally, in the U.S., people who are not performers, politicians or otherwise in the public eye cannot be used unless they agree, in writing.)
The second best choice is to use a free photo. Search online for "free photos" and you will find lots. Most of them are not, however, free. Here's one place to start looking.
Free photos? Really! http://www.techradar.com/us/news/internet/web/12-best-places-to-get-free-images-for-your-site-624818.
Whether the source is free or paid, proper attribution ("photo of ... courtesy of ...") is good netiquette.
Position Property
Self-described Positioning 101 (from a deservedly popular blog): http://alistapart.com/article/css-positioning-101.
CSS compatibility, circa 2010: http://reference.sitepoint.com/css/position.
Authoritative, if dated, with good information on why your positioning may be ignored: http://www.yuiblog.com/blog/2010/12/14/the-css-position-property/.
Z Index
The CSS 2.1 specification is here: http://www.w3.org/TR/CSS2/.
The CSS 2.1 specification is in 18 chapters and 8 appendices. Chapter 9, the "Visual formatting model" is here: http://www.w3.org/TR/CSS2/visuren.html.
For the Z index, you want subsection 9.9, "Layered presentation": http://www.w3.org/TR/CSS2/visuren.html#layers.
We encourage you to read 9.9 down to the the disclaimer that tells you the full Z index specification is found in Appendix E, "Elaborate description of Stacking Contexts." For the very determined, that is here: http://www.w3.org/TR/CSS2/zindex.html.
If this is not enough to make you decide to always use markup order, not the Z index, Appendix E ends this way:
While the backgrounds of bidirectional inlines are painted in tree order, they are positioned in visual order. Since the positioning of inline backgrounds is unspecified in CSS 2.1, the exact result of these two requirements is UA-defined. CSS3 may define this in more detail.
"UA" is specification-speak for "user agent," meaning the browser. CSS3 has yet to define this detail.
Floats
Chris Coyier's CSS-Tricks blog is widely followed, and for good reason. This post re floats is exceptionally well illustrated: http://css-tricks.com/all-about-floats/.
Also from Coyier, this post explains a kludge (a clumsy way of achieving a desired effect) re clearing floats. Sometimes a kludge is needed.: http://css-tricks.com/all-about-floats/.
One more from Coyier on collapsing divs and floats: http://css-tricks.com/containers-dont-clear-floats/.
Display Properties
Exceptionally thorough, including upcoming CSS3 properties and, at the bottom, a helpful browser implementation table: https://developer.mozilla.org/en-US/docs/Web/CSS/display.
Classic and up-to-date, PPK includes a "Playground" where you can try display settings: http://quirksmode.org/css/css2/display.html.
block and inline-block: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/.
Feedback: MartinRinehart at gmail dot com
# # #