Menu icon Foundation
The html5 <div> table code does not work

The following code is supposed to give a row with 3 columns:

----------------------------------- code start ---------------------------------------



a


b


c


------------------------------------ code end ----------------------------------------

But I got 3 rows instead, both on my safari & firefox.

Thanks in advance!

tablehtml5rowcolumn

The following code is supposed to give a row with 3 columns:

----------------------------------- code start ---------------------------------------



a


b


c


------------------------------------ code end ----------------------------------------

But I got 3 rows instead, both on my safari & firefox.

Thanks in advance!

Mousheng over 3 years ago

<div class="row">
  <div class="small-3 columns">
    a
  </div>
  <div class="small-3 columns">
    b
  </div>
  <div class="small-6 columns">
    c
  </div>
</div>

Brian Tan over 3 years ago

Chances are you did not include appropriate css and/or initialize foundation.

Mousheng over 3 years ago

How to include appropriate css and/or initialise foundation?

Thanks!

Brian Tan over 3 years ago

Following for foundation-sites basic template, sass compiled css/app.css (or use bower_components/foundation-sites/dist/foundation.css), and js/app.js contains initialization code $(document).foundation();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Foundation grid</title>
  <link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div class="row">
  <div class="small-3 columns">
    a
  </div>
  <div class="small-3 columns">
    b
  </div>
  <div class="small-6 columns">
    c
  </div>
</div>
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/foundation-sites/dist/foundation.js"></script>
  <script src="js/app.js"></script> 
</body>
</html>

Mousheng over 3 years ago

I used exactly the same code as you provided above, yet still get the same result: 3 consecutive rows instead of 1 row of 3 columns.

Very odd.

Thanks.

Brian Tan over 3 years ago

Make sure you html is at project root directory, otherwise, update css and js location as necessary. Check console.log to see if there is any Error 404.

Edit: check and make sure that you actually have these css and js files. http://foundation.zurb.com/sites/download.html/ If using complete or custom download, use the corresponding css and js files.

If js/app.js is not available, either create or insert inline:

<script>
$(document).foundation();
</script>

Mousheng over 3 years ago

Hi Brian,

I cannot locate console.log on my machine.

There is js/app.js under client/assets & build/assets. I used complete download.

Thanks.

Brian Tan over 3 years ago

Console log is javascript console messages, viewable from browsers development tools.