CSS sucks at layout.

The other day while putting the finishing touches on a website for a client I found myself staring at a set of social media buttons that I wanted to place in the center of a sidebar. I had gone through my usual set of CSS incantations but there it was in IE8, the Twitter button from hell, hanging out slightly to the left and mocking me with uneven vertical spacing.

Nemesis.

I tried to move it with pure mind power which at this point was boiling over with web-developer-rage that's been building and building over years of working with browsers. Sadly, I've been doing this for ten years and I still can't manage to move elements around on the page with my mind. If only there were an easier way...

I knew when I started to write this book layout was going to be the biggest hurdle. Nothing will send you scurrying back to Photoshop faster than a horizontal scrollbar. So the first chapter I wrote, and the chapter I'm giving to you for free today, is all about using flexbox to take the pain out of layout.

Flexbox is a CSS module designed for layout that makes floats, clearing divs and auto margins look like muzzle loading muskets compared to a Navy Seal sniper rifle. By the time you're done reading this chapter, and with a little practice, you'll be as close as one could be to moving things around on the page with a thought.

Here is the chapter: http://www.sketchingwithcss.com/samplechapter/

With this chapter I've included over 30 minutes of screencasts, a flexbox cheat sheet and nine different examples including the 37signals home page, Twitter and the CSS-Tricks forum. The code is included for each example.

I put many, many hours into this chapter because I know layout is hard. But I'm not done yet, the book will also have a section on using grid layout tools.

If you find this sample chapter useful, please share it with your friends and colleagues. Thank you.