EDIT: I wrote this just after I started learning but updated it with new resources and links just before I launched my personal site three years later.
There's no getting away from it (and why would you want to?) this is where stuff starts to get really interesting and a little bit hectic. CSS layout really matters and you've just got to spend some time getting comfortable with it. The good news is that best with flexbox
and grid
we have it so much better than previous generations of developers.
How I approached Learning Layout
I initially did a bit of work learning float layouts. Although you could argue this is no longer relevant, I don't regret this as it gave me an idea of the difficulties of doing layout in the past (man, that must have hurt!) and how much better things are now. And floats still have their legitimate usage for images so no harm in having a basic understanding of how they work.
Positioning is the next thing I learnt. It's worth spending some time on this as applying it can be a life saver at the right moment. Again, I found this a little confusing at first as but once I did a few exercises and played around with some layouts by myself I quickly came to understand how to use this better, and how it can be used for targeted adjustments.
The ** one key thing** for me that helped me here was when I realised that I had to change the position of a parent element to relative
in order to make any children adjust relative to that element rather than the overall body element. (Just change the parent's position to relative
with no other position settings needed and this should work.)
Last, but definitely not least, I came to flexbox
and then grid
. All I can say is take some time to learn this stuff. These options just take away all the hacks and hectic-ness of huge aspects of layout. Sure, it's a little bit complicated to start but you'll gain the few hours you invest leaning then back in no time with the time you save on laying out your pages.
Resources I Used
After some exercises on lynda.com (now LinkedIn Learning)and playing around with my own layout I found Dave Geddes games great fun and really useful - keep an eye out for periodic sales to get Grid Critters, Flexbox Zombies is free. If you want to get a solid grip on both these subjects this is a great resource (just don't use Safari!).
At the end of the day, learning the basics of CSS layout had taken some time [EDIT: three years later I'm still learning!], and applying it in the real world still really challenges me . I guess this may never go away, and maybe it shouldn't [EDIT: still challenges me too!], but freeing yourself up by getting comfortable with modern CSS tools can only help you do great things.