Establishing a new block formatting context using overflow: hidden;

Today Vasilis tweeted a link to a very nice (and old, apparently) CSS trick:

Overflow does some cool things you should know about.

  1. Creates Block Formatting Context
  2. Clears Floats

The second feature I did know, the first I didn’t.

The bounding box of an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.

Embedded below is an example with an img, adjacent to a div (recognisable by its grey background color), which is being left floated. The div in the second example has overflow: hidden; applied to it. The one in the first example hasn’t:

Check out this Pen!

Neat, really neat.

Overflow – a secret benefit →

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Pinterest’s div stacking layout algorithm

The number of columns adjusts to fit more/less on browser resize and the vertical stacking is not dependent on adjacent column heights. The source code shows that each div is positioned absolute. I would love to know how to accomplish this.

What technology is used to generate pinterest.com’s absolute div stacking layout? →