CSS Positioning and Sizing.

CSS positioning and sizing has been for me the hardest part of learning web development.

I have never had any difficulties in understanding why HTML works the way it does. The structure seems completely logical in its hierarchical organisation. And even with programming languages, which do of course all have their quirks and idiosyncrasies, ultimately you can usually figure out how to get stuff done by thinking logically.

CSS, though, or rather the way it handles the positioning and sizing of the various DOM elements with respect to each other, their siblings, their parents and the viewport, sometimes has had me completely stumped. It has seemed like learning a completely unknown human language in that I have sometimes just felt at a loss, because I can't express what I want to say or achieve, and I can't use logical thinking to make an intelligent guess.

But finally I think I'm starting to understand the way it behaves, though I still have much to learn.

I do think it's rather like a sort of black art though!

So, partly for my own benefit, but also for anyone who's having issues with positioning and sizing in CSS, I've compiled a list of the topics I need to understand in this regard. I haven't provided any answers but at least there's a list which I can work through, taking each in turn and just playing about till enlightenment comes!

What I need to learn more about:


I recently submitted a version of the above list to the excellent Syntax FM Podcast and was delighted to get a mention from Wes Bos on Episode 86 for "the most nicely formatted question I've ever seen!" and from Scott Tolinski, who said "It's so good!"

Wes added "Thank you, we're just gonna take your entire outline and do a show on that!"; so I await said show with considerable interest!