Menu icon Foundation
Left or right float of rows/divs

If I use the code snippet from the forms doc :

<form>
  <div class="row">
    <div class="medium-6 columns">
      <label>Input Label
        <input type="text" placeholder=".medium-6.columns">
      </label>
    </div>
    <div class="medium-6 columns">
      <label>Input Label
        <input type="text" placeholder=".medium-6.columns">
      </label>
    </div>
  </div>
</form>

 

it will place the input fields stacked on top of each other. I

found a solution by using your "grid-x" and "grid-margin-x"

class in the form.

 

<form>
  <div class="grid-x grid-margin-x">
    <div class="small-4 cell">
     <label>First Name <input type="text" placeholder="Enter First Name"></label>
   </div>
   <div class="small-4 cell">
     <label>Last Name<input type="text" placeholder="Enter Last Name"></label>
   </div>
  </div>
</form>

 

It still doesn't explain why the simple code snippet with the

class "row" does not work as intended in your tutorial though...

If someone has an explanation, that would be awesome.

Thank you!

 

floatRowsdivs

If I use the code snippet from the forms doc :

<form>
  <div class="row">
    <div class="medium-6 columns">
      <label>Input Label
        <input type="text" placeholder=".medium-6.columns">
      </label>
    </div>
    <div class="medium-6 columns">
      <label>Input Label
        <input type="text" placeholder=".medium-6.columns">
      </label>
    </div>
  </div>
</form>

 

it will place the input fields stacked on top of each other. I

found a solution by using your "grid-x" and "grid-margin-x"

class in the form.

 

<form>
  <div class="grid-x grid-margin-x">
    <div class="small-4 cell">
     <label>First Name <input type="text" placeholder="Enter First Name"></label>
   </div>
   <div class="small-4 cell">
     <label>Last Name<input type="text" placeholder="Enter Last Name"></label>
   </div>
  </div>
</form>

 

It still doesn't explain why the simple code snippet with the

class "row" does not work as intended in your tutorial though...

If someone has an explanation, that would be awesome.

Thank you!

 

Brian Smither about 2 years ago

Some thoughts:

Is your viewport wide enough to accommodate the number of capital-M characters that the media-query specifies for the small-medium breakpoint - approx. 40em?

Any other CSS overruling foundation.css? Use the browser's diagnostic tools to view the rules on either of the columns div.