Question

Using the Gumby Framework I’m encountering issues nesting divs.

I’m trying to nest a three and seven column grid within a ten column grid.

I’ve tried a few variations with my HTML/CSS to no avail. Figure I must be missing something fairly simple.

Site Link

HTML code example:

 <div class="ten columns main_col">
 <p>Text removed</p>

 <div class="row">
 <div class="three"><h2 class="100width">Core Services</h2></div>
 <div class="seven"></div>
 </div>

 </div>

Answer 1

The framework isn’t “smart”. Everything is based on 12 or 16 columns. So you’ve got to do all the thinking for things of this nature. If you want a 3-7 centered container within a 12 column grid, the following code does just that:

<!-- 10 Columns -->
<div class="row">
    <div class="three columns push_one">3 col</div>
    <div class="seven columns">7 col</div>
</div>
<!-- // End 10 -->

Here’s why: 10 columns = 10 of 12(for argument’s sake), 3 columns and 7 columns within that container are actually a 30% of 12 column next to a 70% of 12 column residing inside a 83.333% of 12 column container. Throwing class="ten columns" on the container doesn’t fire some kind of recursive function to “reset” the container as a 10 column grid system; thus, the goofy margins, padding, etc. It’s actually working as expected. Hope that makes sense.