Foundation framework nested columns - html

Question

super-new to grids and Foundation (I'm using 6.3). I just wanted to check I had this correct, as I was finding it difficult to check against the official documenation.
Basically Im trying to center 8 columns in a row. Then I want two columns within this, one for content and a smaller one for a sidebar.
Initially I created the following as it made sense to me that a large-8 column would then have a large-6 and large-2 within it, adding up to the 8 of the container.
<div class="row">
<div class="large-8 columns large-centered">
<div class="large-6 columns" style="background-color: red;">1</div>
<div class="large-2 columns" style="background-color: green;">2</div>
</div>
</div>
This did not work, but the following does. Before I continue I wanted to check if this is the correct way of doing what I want to do (so effectively the large-8 and large-4 add up to 12 again, despite being nested within a large-8.
<div class="row">
<div class="large-8 columns large-centered">
<div class="large-8 columns" style="background-color: red;">1</div>
<div class="large-4 columns" style="background-color: green;">2</div>
</div>
</div>

Answer 1

The second one will work in most scenarios, but the "Foundation" way of doing what you are asking for (from http://foundation.zurb.com/sites/docs/grid.html) is:
<div class="row">
<div class="large-8 large-offset-2 end columns">
<div class="row">
<div class="large-8 columns" style="background-color: red;">1</div>
<div class="large-4 columns" style="background-color: green;">2</div>
</div>
</div>
</div>
So you have:
2 col | 8 col | 2 col
--------------------------------------
| 8 col | 4 col |
.end simply ends a row without having to specify an empty column to fill up the space, and you need the second .row (though it kind of works without it) because you may run into nesting problems further down the line otherwise.