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
Post a Comment