Foundation CSS Framework-Responsive Grid

Question

I have started using Foundation4 CSS framework for designing and developing A repsonsive page.

I am struggling with the footer(div),on Desktop it the div with class="small-12 coulms" settles at the bottom

but however when I am trying to reduce the browser screen size for mobile the bottom div is coming up in between other divs rather than occupying the footer position.

This is my code, Any assistance how I can restrict the footer using the Foundation 4 CSS framework methods will help me a lot in using the framework.

  <div id="header" class="row">

    <div id="logo" class="large-3 columns">

      <img src="img/logo-header.gif" />

    </div>

    <div id="slogan" class="large-3 columns">

      <span class="slogan">AAAAAAAAAAAAAAAAAAA

       <sup style="font-size: 13px;font-family: Arial;">*</sup>,    

    BBBBBBBBBBBBBBBBB
      </span>
    </div>

    <div id="search" class="large-5 columns">

      <div class="large-12 columns  hide-for-small">

        <ul class="topLinks">

         <li><a href="financial-planning-advisors-consultants.aspx">Contact us</a></li>
         <li><a href="Career.aspx">Careers</a></li>

         <li><a href="ResourceCenter.aspx">Research &amp; Tools</a></li>

         <li class="noBorder"><a href="AboutUs-AboutAmeriprise.aspx">About </a></li>
        </ul>

      </div>

      <div class="large-12 columns">

            <div class="small-8 columns">

        <input type="text" />

        </div>

        <div class="small-4 columns">

        <a href="#" class="small button">Search</a>

        </div>

      </div>

    </div>

   </div>

  </div>


<div class="small-12 large-12 columns">

  <div class="row">

    <nav class="top-bar">

       <ul class="title-area">

<!-- Title Area -->
          <li class="name"><h1><a href="#"> Home </a></h1></li>

<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
          <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
       </ul>

       <section class="top-bar-section">
<!-- Left Nav Section -->
        <ul class="left">
          <li class="divider"></li>
          <li class="active has-dropdown"><a href="#">Experience the   difference</a>
            <ul class="dropdown">
              <li ><a href="#">Why We</a></li>
              <li><a href="#">Getting Started</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li class="divider"></li>
          <li class="has-dropdown"><a href="#">How Can We Help You</a>
            <ul class="dropdown">
              <li ><a href="#">Our Unique Aprroach</a></li>
              <li><a href="#">Our Offerings</a></li>
              <li><a href="#">Financial Products</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li class="divider"></li>
          <li><a href="#">Have An Advisor Contact You</a></li>
          <li class="divider"></li>
        </ul>

<!-- Right Nav Section -->
        <ul class="right">
          <li><a href="#">My Account</a>
        </ul>
      </section>
    </nav>
   </div>
  </div>


  <div  class="small-12 large-12 columns">

    <div id="mainSection" class="row" style="background:blue">

       <div id="left" class="large-3 columns" style="background:#8DBC8F" >

         <div id="leftFirst" class="large-12 columns" style="background:#F08080"><h3>News and Features </h3></div>

         <div id="leftSecond" class="large-12 columns" style="background:#E6E6FA"><h3> About </h3></div>

       </div>

       <div id="right" class="large-9 columns" style="background:#008B8B"> 

         <div id="rightContainer" class="row">

           <div id="leftFirst" class="large-12 columns" style="background:#DAA520"> </div>

           <div id="leftSecond" class="large-12 columns" style="background:#7B68EE"> 

            <div id="welcome" class="row">

              <div id="image" class="large-12 columns"><h3>Welcome TO </h3> </div>

               <div id="about" class="large-12 columns"> 

                 <div id="welcome" class="row">

                   <div id="about1" class="large-4 columns"><h6>EEEEEEEEEEEEE</h6> </div>

                   <div id="about2" class="large-4 columns"> <h6>Our Unique Aprroach</h6> </div>

                   <div id="about3" class="large-4 columns"><h6>Our Offerings</h6>  </div>

                   </div>
                 </div>

               </div>

            </div>

           </div>
          </div>

       </div>
       <div id="footer" class="large-12 columns">
       nithkincdbjcbdsj
       </div>

    </div>

  </div>    

    </div>

Answer 1

Not sure if you have this resolved. I noticed in your example code above, there are many nested columns that are not contained by an element with the class "row".

<div class="row">
    <div class="large-12 columns">
        <div class="row">
            <div class="large-eight columns">
                <div class="row">
                    <div class="large-12 columns"></div>
                </div>
            </div>
            <div class="large-4 columns"></div>
        </div>
    </div>
</div>

It is my understanding that this is necessary for the columns to work correctly.

Someone correct me if I'm misunderstanding the docs.

Answer 2

I would have the footer as its own class="row", personally. I believe the class applies a clearfix so it stays on its own.