Is there a CSS gridwork frame that accomodates nested visual boxes?

Question

I've been working with the BluePrint.css framework on a project. It works well.

However, like most of the CSS frameworks I've looked at, it appears geared more to a text-heavy newspaper-esque layout. It gets a bit more difficult to use when using it for building web applications that utilize a 'widget' metaphor such as SharePoint or iGoogle or the like. The key issue being that in a web app, it's often standard to create visual containers of information. This introduces a box which needs padding which ends up breaking the grid.

Another way to explain is if your container box spans 8 grid columns, you won't be able to fit 8 grid columns within it, as the container box has padding.

I've found workarounds for this but they all entail adding another layer of CSS that gets a little cumbersome. Before I continue on to the next project, I thought I'd see if anyone else has run into this issue and a) found a grid system that does accomodate this visual requirement or b) found some clever ways to accomodate this in one of the existing CSS frameworks.

Answer 1

The way it is intended that you would handle this is you would use a container/wrapper that has the grid assignment and then add the div with the arbitraty padding/margin inside that.

<style type="text/css">.widgetType {padding: 10px;}</style>
<div class="span-8 column clearfix">
  <div id="myWidget" class="widgetType widgetType-skin-myskin">
    <!-- content -->
  </div>
</div>

In fact in blueprint there is even a base class for doing just this and keepin gwith the grid the class is .box which adds 1.5em padding if i recall. Ofcourse this padding may be to deep for your liking so you can not use that class and use something arbitrary if you like