css - Which tags allowed to have columns class in Foundation -



css - Which tags allowed to have columns class in Foundation -

i have grid construction using zurb-foundation version 5. utilize elements other div handle row or columns such new html5 tags nav, header, etc. causes problems grid layout?

i inquire on issue because there column seems not in grid. i.e height shorter neighbour columns:

<header id="header" class="row"> <div id="logo" class="small-4 large-4 columns"> <div id="site-logo"><a href="/4test/drupal-7.28/" title="home"> <img src="http://localhost/4test/drupal-7.28/sites/default/files/ari_0.png" alt="home"> </a></div> <a href="/4test/drupal-7.28/" title="home"><span>drupal test</span></a> </div> <nav id="navigation" role="navigation" class="small-8 large-8 columns"> <div id="main-menu" class="row"> <div class="small-12 large-12 columns"> <ul class="sub-nav"><li class="first leaf active"><a href="/4test/drupal-7.28/" title="" class="active">home</a></li> <li class="leaf"><a href="/4test/drupal-7.28/blog" title="the blog">blog</a></li> <li class="last leaf"><a href="/4test/drupal-7.28/node/4">about us</a></li> </ul> </div></div> </nav> </header>

in code above nav height in inspect element short , doesn not cover height of neighbour columns.

the next screen shot demonstrate situation:

its working expected column not take height of row. doesnt have height set @ tall children elements.

if want same height have set min-height.

<div id="logo" class="small-4 large-4 columns">

this div above have height of children elements, sec column

here test

css responsive-design zurb-foundation

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -