Is there a way to have a fluid 960 grid system behave in the same way as a fixed width 960 grid system when it comes to nested grids?

Question

My company's website is currently using a fixed width 960 grid system. There has been talk of moving toward a fluid design, so I've been researching fluid 960 grid systems.

As far as I can tell, the two systems behave in a similar manner, until you have nested grids. For example in a fixed width system:

<div class="grid_12">
    <div class="grid_6">
        <div class="grid_6">
            <p>This paragraph will fill up half the space of the grid_12 div in a 12 column grid.</p>
        </div>
    </div>
</div>

My understanding of a fluid 960 grid system (and of percentages as well) would be something like this:

<div class="grid_12">
    <div class="grid_6">
        <div class="grid_6">
            <p>This paragraph will only fill up a quarter the space of the grid_12 div in a 12 column grid, at least as far as I can tell.</p>
        </div>
    </div>
</div>

Now, I understand that if I changed the innermost div in the code above to grid_12, it would work the same as the first example, but the website has many pages, and although I could go through and change every instance of nested grids accordingly, it would take quite some time (Especially since most of the pages were written before I was hired).

So, is there a way to have nesting in the fluid grid system work the same way as the fixed width without changing anything on a page by page basis?

I suspect the answer is no, but I figured if there's a way I'm not thinking of to do it, someone on SO would know.

Answer 1

depending on how complex is your actual layout, you could try and do something like

.grid_6 .grid_6 { width: 100% }

and so on

ofc, you'll need to add these type of selectors at least for every case you have on the website, but I wouldn't really recommend it, as it's more of a workaround than a good solution.

maybe try and find a new grid/layout solution more appropriate to the new specifications?