zurb/foundation — Issue #142: The "Foundation" way to vertical align...?
Author: siteadvice
Created: 2011-12-07 18:03:17+00:00
State: open

I emailed Zurb about this yesterday and the Lead Design, Jonathan, kindly emailed me back, but I wanted to open it up for other people in case you have any ideas.

I am a Foundation newbie but I really like the idea of a cross-platform framework that really works.

The challenge I have found is with a fairly simple header - logo in the top left with a row or social media icons to the right.

Pretty standard stuff, but the logo is much bigger than the icons, and I need the icons to align to the bottom of the logo.

In Foundation, we're working mostly with blocks of content, so vertical-align won't work.

I could fix the relative position of the icons, but again that's not going to work well with Foundation.

But making the images inline means that you're not really using Foundation at all.

Also, if the images are inline, I get a rather unattractive rearrangement of the icons when I squeeze the browser to a certain width. Obviously in an ideal world, you'd want the three images to stay grouped but because they're inline, the last icon in the line drops down the page as you narrow the browser width, then the second-to-last icon drops down as you narrow it further.

Here's a simple version of the code with the images inline - how would you do it the "Foundation" way so that the images align to the bottom and still look great if the icons are wrapped underneath the logo...?

<div class="twelve columns">

<.div style="vertical-align: bottom;">

<img style="padding-right:30%;" src="../images/logo.png">

<a href="https://twitter.com/"><img src="../images/icons/twitter2.png"></a>

<a href="http://www.facebook.com/"><img src="../images/icons/facebook2.png"></a>

<a href="/RSS/"><img src="../images/icons/rss2.png"></a>

</div>

</div>