Menu icon Foundation
four columns push-eight

Hi, I'm trying to use the Foundation website footer, as per bottom of this page, (I've posted html).

The issue I have is that the positioning is not inline, side by side, but above and below, class="four columns push-eight" takes the entire row. So the question is how to control that behavior and have them nested L+R???

Many Thanks

<div class="row">
    <div class="four columns push-eight">
      <ul class="home-social">
          <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
          <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
          <li><a href="http://zurb.com/contact" class="mail"></a></li>
        </ul>
     </div>
     <div class="eight columns pull-four">
        <a href="http://www.zurb.com" class="zurb-logo regular"></a>
        <ul class="zurb-links">
          <li><a href="http://zurb.com/about">About</a></li>
          <li><a href="http://zurb.com/blog">Blog</a></li>
          <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> &amp; Events</span></a></li>
          <li><a href="http://zurb.com/contact">Contact</a></li>
          <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
       </ul>
       <p class="copyright">© 1998–2013 ZURB, Inc. All rights reserved.</p>
    </div>          
  </div>
            

         

pushpullsource ordering

Hi, I'm trying to use the Foundation website footer, as per bottom of this page, (I've posted html).

The issue I have is that the positioning is not inline, side by side, but above and below, class="four columns push-eight" takes the entire row. So the question is how to control that behavior and have them nested L+R???

Many Thanks

<div class="row">
    <div class="four columns push-eight">
      <ul class="home-social">
          <li><a href="http://www.twitter.com/ZURB" class="twitter"></a></li>
          <li><a href="http://www.facebook.com/ZURB" class="facebook"></a></li>
          <li><a href="http://zurb.com/contact" class="mail"></a></li>
        </ul>
     </div>
     <div class="eight columns pull-four">
        <a href="http://www.zurb.com" class="zurb-logo regular"></a>
        <ul class="zurb-links">
          <li><a href="http://zurb.com/about">About</a></li>
          <li><a href="http://zurb.com/blog">Blog</a></li>
          <li><a href="http://zurb.com/news">News<span class="show-for-medium-up"> &amp; Events</span></a></li>
          <li><a href="http://zurb.com/contact">Contact</a></li>
          <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
       </ul>
       <p class="copyright">© 1998–2013 ZURB, Inc. All rights reserved.</p>
    </div>          
  </div>
            

         

This post has been closed. No new replies can be added.

Paul almost 5 years ago

spotted it! class should be, large-4 columns push-8