Apparently, dealing with absolute positioning and floats has been something that people consider difficult. Or at least irritating.
Not compared to nested tables. Holy crap, did that suck. (Auto-suck?)
The first design, Backyard, is all about absolute positioning versus floating. I’m really not a fan of the absolute, myself. Too much overlap, too much possibility of data loss when a browser is resized or your page is viewed at wacky resolutions. There was one bit that grabbed my curiosity and ran: When you use absolute positioning, the rest of the document completely ignores what you positioned, as if it weren’t there.
Gone. Bamf.
Great for columns, not really that great for anything else. Once again, this is only IMHO.
In the work I tend to do, floats are preferable. Images need to have text wrap around them dynamically, depending on size of the window and size of the graphic. I want to be able to change the graphic without having to re-work an entire CSS class. I want to be able to apply the class broadly, instead of specifically. Also, floating leads to liquid layout.
Which brings us to Entomology. Fixed layout takes your data, gives it a specific size, and lets whitespace or background graphics fill the excess allowed by bigger browser windows. Liquid layout lets your data fill the entire window, no matter how large or small. Fixed layout tends to look a bit more business-professional, but from a utilitarian standpoint, that’s a whole crap load of wasted space. Not to mention the possibility of browser windows that are smaller than your content.
HORIZONTAL SCROLL BAD! AUTO-SUCK!
Like that blink tag. Geh.
There’s also a nice trick in this section about using absolute positioning to center a graphic horizontally. With nested divs, I’m pretty sure you could use this trick in a liquid layout.
White Lily is all about the planning involved in layout. The concept that stuck with me here is consistency in design. Little images for bullet-points, links, expanding trees, etc. should all fit an intuitive and consistent theme. The purpose of these things should be easily discernible on first glance.
And then there’s Pret-a-porter. While I dig the graphics and creativity of the design, please reference my earlier notation about horizontal scrolling. Port-a-potty.
CS(S) Monk takes me back. The grid, which is a method of designing layout on graph paper, reminds me strongly of designing Doom levels on graph paper over a decade ago. I took to this method quite quickly, as the grid shows up easily in my mind’s eye, and things lock into place visually.
On the flip side, the grid is best for absolute layout, instead of liquid. I suppose an initial design could be done with the grid method, and then tweaked to become liquid. I’ll have to think on this one.
Not So Minimal deals with clearing, more floats, and absolute-position overflow. It’s mostly tips and tweaks for found problems with absolute positioning. And that’s it for Chapter 3.