html - zurb foundation splitting one row into two columns -


updated

<div class="container">       <div class="row">         <div class="main 8 columns" >           <div class="row">             <div class="main 4 columns">               <a href="#" class="button" data-dropdown="drop1">has dropdown</a>                 <ul id="drop1" class="f-dropdown" data-dropdown-content>                   <li id="halfanhour">half hour</li> <!-- in half hour-->                   <li><a href="#">this another</a></li> <!-- in 1 hour -->                   <li><a href="#">yet another</a></li> <!-- in 1.5 hour -->                   <li><a href="#">yet another</a></li><!--in 2 hours-->                   <li><a href="#">yet another</a></li><!-- in 2.5 hours-->                 </ul>             </div>             <div class="main 4 columns">               estimated wait time             </div>           </div>         </div>         </div>       <div class="row">         <div class="main 8 columns">             <div class="element">                 <div class="waittime">                   <%= @shakelines['average_line_wait_secs'][0]%><br/>                     <div class="minute">                         minutes                     </div>                 </div>             </div>         </div>     </div>      <div class="row">         <div class="eight columns">           <div class="footer">               powered placemeter labs            </div>         </div>     </div>  </div> 

i have container row. set div columns 8 columns. want split div 4 columns each. first column belongs text estimated wait time , other drop down box should take care of rest of 4 columns. expect rendered in 1 row estimated wait time rendered below drop down box. want estimated wait time float left of columns , drop down box float right of columns.

the column class names should using newest grid class name syntax. need specify screen size , number.

for example, change this:

class="main 4 columns" 

to this:

class="main small-4 large-4 columns" 

source: http://foundation.zurb.com/docs/components/grid.html


Comments

Popular posts from this blog

PHPMotion implementation - URL based videos (Hosted on separate location) -

javascript - Using Windows Media Player as video fallback for video tag -

c# - Unity IoC Lifetime per HttpRequest for UserStore -