Menu icon Foundation
Ink: Row inside Container // Container inside Row? (header vs content

Hi Guys,

Quick question - I was looking at the nesting of tables and their respective styles and noticed a discrepancy between the structure of the HEADER table and the CONTENT table.

The nesting in the HEADER goes: Table[row] > Table[container] > ...
The nesting in the CONTENT goes: Table[container] > Table[row] > ...

I should mention, this order is taken from the example templates provided.

Stripped code for illustration:

nestingRowscontainers

Hi Guys,

Quick question - I was looking at the nesting of tables and their respective styles and noticed a discrepancy between the structure of the HEADER table and the CONTENT table.

The nesting in the HEADER goes: Table[row] > Table[container] > ...
The nesting in the CONTENT goes: Table[container] > Table[row] > ...

I should mention, this order is taken from the example templates provided.

Stripped code for illustration:

Oliver B about 4 years ago

The HEADER table:
HTML
<table class="row header">
<table class="container">
<td class="wrapper last">
<table class="twelve columns">

</table>
</td>
</table>
</table>

The CONTENT table:
HTML
<table class="container">
<table class="row">
<td class="wrapper [last]">
<table class="twelve columns">

</table>
</td>
</table>
</table>

Rafi Benkual about 4 years ago

That looks right. The .row class only does one thing. It is a wrapper for columns and the CSS makes it go 100% width

table.row { 
  padding: 0px; 
  width: 100%;
  position: relative;
}

So in the case of the header it makes sense, if you want it to be 100% width rather than 580px to have it outside the container.

You can see in this example where the header is wider than 580px
http://codepen.io/rafibomb/pen/rabrVE?editors=110

Oliver B about 4 years ago

Was still getting to grips with Ink; thinking of the class names as just "functions" rather than "nouns" makes it clearer (just because it says row, doesn't mean it has to be a row, it just means it'll apply the styles needed for a new row to format nicely, etc.).

Thanks for taking the time :) (btw this came in handy the day you replied; was just swamped and only now returned)