0

I do need a little help. I would like to align a .row to the bottom of a section. The three containers you see on the image below need to be at the bottom. I cannot use "fixed" or "sticky" because they should not be. I use fullpage.js to scroll from section to section. The "menu" is in the third section at the end of the page.

When I use position: absolute, the containers will not be centered in the columns any more. When I use display: table I get a 1px gab between the second and the third column.

Does anybody have an Idea How I can solve this?

Thank you in advance!

Here is how it looks now

enter image description here

This is what I want it to look like.

enter image description here

Here is the html i have used.

      <!-- Main Menu -->
      <div class="section home row" data-anchor="Menu" >

          <div class="small-4 columns" id="main-nav-ka" data-wow-duration="1s" data-wow-delay="0.4s">
            <h3>IM GEIST<br>WIE<br>GLADIATOREN</h3>
            <!-- Nav Boxen position bottom -->
            <div class="box row">
              <ul class="box-inner">
                <li><h4 class="kapitel serif">KARRIERE</h4><hr></li>
                <li><a href="gelaendesport.html">GEL&Auml;NDESPORT</a></li>
                <li><a href="#">KREIDLER</a></li>
                <li><a href="#">SUZUKI</a></li>
              </ul>
            </div>

          </div>
          <div class="small-4 columns" id="main-nav-rk" data-wow-duration="1s" data-wow-delay="0.6s">
            <h3>ALLES IN<br>EINEM<br>FINGERHUT</h3>
            <!-- Nav Boxen position bottom -->
            <div class="box row">
              <ul class="box-inner">
                <li><h4 class="kapitel serif">RK 67</h4><hr></li>
                <li><a href="#">TECHNIK</a></li>
              </ul>
            </div>

          </div>
          <div class="small-4 columns" id="main-nav-sh" data-wow-duration="1s" data-wow-delay="0.8s">
            <h3>RENNER<br>UND<br>ROMANTIKER</h3>
            <!-- Nav Boxen position bottom -->
            <div class="box row">
              <ul class="box-inner">
                <li><h4 class="kapitel serif">SCHORSCH</h4><hr></li>
                <li><a href="#">LEBEN &amp; FAMILIE</a></li>
                <li><a href="#">BUCH</a></li>
                <li><a href="#">KONTAKT</a></li>
              </ul>
            </div>

          </div>
      </div>
Kaya.T
  • 31
  • 6
  • 1
    It's not clear how this should look. Something like this - http://codepen.io/Paulie-D/pen/dGxajr ? – Paulie_D Feb 24 '16 at 12:56
  • more or less that is what i mean. I will try to do it with flex. but will that be rendered correct in older browser versions too? the blocks should be aligend at the top edge but in the bottom 1 3rd of the page. I will try to post an preview of what I mean. – Kaya.T Feb 24 '16 at 14:49
  • it worked! I gave the .box a height of 300px. now the h4 headings align at the top of the .box container. thanks for you help! – Kaya.T Feb 24 '16 at 15:53

0 Answers0