csshtmlzurb-foundationzurb-foundation-5

Zurb foundation columns width not working

I have got following code snippet, where the widths of columns should be working, but somehow its not happening and both divs with column class are coming in next row. 

<html>

<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>  
</head>

<body> 

    <div class="row">
        <div class="large-8 columns"> Hello </div>
        <div class="large-4 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.
    </div>

</body> 

</html>
Solution

  • Your foundation.min.css link needs to have a rel="stylesheet" property to specify it is a stylesheet relationship. Otherwise it wont be used as one. You are also missing a closing </div> on your large-8 columns line.

    <html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
  </head>

  <body>
    <div class="row">
      <div class="small-2 columns"> Hello </div>
      <div class="small-10 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.</div>
    </div>
  </body>

</html>`