CODEWITHSUNDEEP
htmlcsszurb-foundation
Jngai1297
Jngai1297

Reputation: 2495

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 an Hour</li> <!-- in half an hour-->
                  <li><a href="#">This is another</a></li> <!-- in one 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 eight 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 BY PLACEMETER LABS 
          </div>
        </div>
    </div>

</div>

I have a container with a row. I set the div columns to eight columns. I want to split this div into 4 columns each. The first column belongs to a text just Estimated Wait time and the other drop down box should take care of the rest of the four columns. I expect this to be rendered in one row but the Estimated Wait time is rendered below the drop down box. I want the estimated wait time to float to the left of the columns and then the drop down box to float to the right of the columns.

Upvotes: 0

Views: 1168

Answers (2)

Jesse Fisher
Jesse Fisher

Reputation: 785

The column class names should probably be using the newest grid class name syntax. You need to specify a screen size and 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

Upvotes: 1

Bass Jobsen
Bass Jobsen

Reputation: 49054

If you check the docs on http://foundation.zurb.com/docs/components/grid.html you will found that the nested columns also should be wrapped in a .row:

<div class="container">
    <div class="row">
        <div class="main eight columns" >
        <div class="row">
             <div class="main four columns">
               <a href="#" class="button" data-dropdown="drop1">Has Dropdown</a>
                 <ul id="drop1" class="f-dropdown" data-dropdown-content>
                  <li><a href="#">This is a link</a></li> <!-- in half an hour-->
                  <li><a href="#">This is another</a></li> <!-- in one 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 four columns">
                    Estimated Wait time
                </div>
        </div>     
        </div>   
     </div>
</div>

Upvotes: 0

Related Questions