Search code examples
zurb-ink

Can there be multiple container tables in Zurb Ink?

Zurb Ink's grid requires a table.container element at the top-most level to contain rows and columns. However, it's not clear to me if there should only be one table.container for the whole email – kind of like a <body> tag. Or is it is better practice to have multiple containers, one for each section?

Solution 
  • table.container {
  margin: 0 auto;
  text-align: inherit;
  width: 580px;
}

    Look at the CSS code for table.container It is used to create a fixed width layout which centers the content.

    Now coming to your question, Look in the documentation for Reverse Row Syntax. It is a indication that tells you that you can use multiple containers if you need to restrict the full width row.

    • If you have a fixed width layout throughout, use table.container at the top.

    • If you have variable length elements, use table.container at each section if you want to restrict the width for the content.