How to cross fade elements with variable heights: Responsive Design’s Dirty Little Secret

John Albin Wilkins article on responsive design’s dirty little secret is extremely useful.
http://www.palantir.net/blog/responsive-design-s-dirty-little-secret

The core theory is floating elements with margin-right: -100%;

Your "grid" elements are all floated, with margin-left: X%, and margin-right: -100%.

At first, i didn’t really know what to make of it.. now it’s a critical part of my toolbox.

What this lets you do is stack elements on top of each other, positioning purely by the margin-left attribute. The negative margin right allows you to use what almost looks like absolute positioning, but while still keeping the elements "in the flow" vertically.

That’s right.. with this trick, you can still have vertical flow while giving up horizontal flow.

Every time you’ve used absolute positioning to achieve a cross fade, but had to hard code the height value, you could have just used this instead.

Give it a shot!

TL;DR: the dirty little secret allows you to retain vertical page flow, while removing elements from horizontal page flow. Oh my goodness. This should be CSS 101.

One thought on “How to cross fade elements with variable heights: Responsive Design’s Dirty Little Secret

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s