O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Maintaining row and page width

The simplest way to set the maximum page width for your website is to put all your content inside a containing row.

<body>
<div id="container" class="row"><div class="large-12 column">
<!-- website content -->
</div></div><!-- end #container -->
</body>

This code creates an outside row with a maximum width equal to the max-width value of the row (the default value is 62.5 em or 1000 px).

As a general rule, while creating an outer containing row, always include a column that has the full width (for example, large-12 columns). Otherwise, the negative margins of an inner row will make your website wider than you anticipated.

Only the outermost row has a specific maximum width value. Inner rows expand to fill the container ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required