You surely need to check this website out:

It’s a great resource created by @incompl and Isaac Durazo. homepage

That’s all. Oh yes… and I just translated it to italian.

wtf css layout - TL;DR

When I started studying CSS I remember that the most difficult thing to understand was figure out how to use those cool selectors and properties to properly reproduce great page layouts.

There are several positioning methods you can approach, mastering them surely would take you much time.

Tricky names impossible to remember and awful results.

I clearly remember that I wanted a quick guide, a reference where to learn the CSS layout, but nothing was there. A guide developers from all over the world could use and start doing their work: create the layout they need.

If you are a frontend developer, or if you worked with them before, you probably would know that:

  • position has strange values
  • fixed really does not fix your problems
  • block is the opposite of inline
  • margin not always works
  • padding and width, they just mess everything up
  • float … uh?

After few years of trying, creating static mockups, jsfiddles, pastebins and tons of stackoverflow you probably will end up mastering all of them :)

I think is a great resource, I know it will help future developers to better understand the CSS and how to properly use it in order to achieve the desired layout. is straightforward, you can’t ask for better examples or explanation. Not even MDN is so clear.