1 reply [Last post]
overdrive's picture
Chico, CA
Last seen: 8 years 33 weeks ago
Chico, CA
Timezone: GMT-7
Joined: 2012-09-17
Posts: 13
Points: 18

I'm looking for an awesome book that teaches CSS Layouts. Positioning elements can be quite a challenge in CSS. I have gone through the site http://learnlayout.com/ but that's just the very basics. I'm looking for a book that goes over layouts comprehensively.
I searched on Amazon but I really can't tell if the books are going to teach a whole lot of positing.

gary.turner's picture
Last seen: 2 years 3 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Looking in all the wrong places

Layout is simple, don't obsess on it. What causes the problems are the myriad gotchas that every powerful property has. If you want a book, get Dan Cedarholm's Bulletproof Web Design. There's a newer edition that covers html5 and css3, but this is the link I have handy.

Regarding the tutorial you referenced, until you reach advanced amateur status, don't use positioning for major layout elements. Stick with the float and display properties.

The 'clearfix hack' the tute mentions isn't. That's simply the usage, one of several, of a new block formatting context. The real clearfix hack was developed by our forum host, Tony Aslett, several years ago when less was understood about block formatting contexts and and MSFT's abominable variation called hasLayout. See Tony's original write up of Contained Floats, the clearfix technique.

If you really want to understand the nuances of css you need to study the specs. The editor of the html5 specs has this to say:


1.7.1 How to read this specification

This specification should be read like all other specifications. First, it should be read cover-to-cover, multiple times. Then, it should be read backwards at least once. Then it should be read by picking random sections from the contents list and following all the cross-references.

Thoroughly learn css2.1 first, then add in the new stuff from css3. See CSS2.1.

Practice what you learn and if you have trouble with something or want clarification, ask. That's what we're here for.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.