I suggest you use .row-fluid to create subgrids inside a fixed grid. This way, the .row-fluid will fill 100% width available (block width - side paddings).
Check this out: http://www.byfuss.com is an example of how to create main layout blocks with padding and have sub grids. Pedro. On Saturday, June 30, 2012 7:34:17 AM UTC-5, Barry vd. Heuvel wrote: > > With the normal boxmodel, the padding gets added to the width of the > element, thus making it not fit anymore. > > You could try to use the border-box boxmodel on your .box > .box-sizing(border-box); > > (Works on IE8+, so no IE7, but you could use a polyfill. > > See http://paulirish.com/2012/box-sizing-border-box-ftw/ and > http://html5please.com/#box-sizing > > On Fri, Jun 29, 2012 at 8:39 PM, Nicolas Chenet > <[email protected]<javascript:> > > wrote: > >> Have you tried to nest divs into your .span4 divs and then applying CSS >> to these nested divs ? >> >> Envoyé de mon iPhone >> >> Le 29 juin 2012 à 20:26, Helmut <[email protected] <javascript:>> a >> écrit : >> >> > I've been using TB for a few weeks and still haven't figured out the >> secret to adding pads or borders to a multicolumn layout without destroying >> it. I've tried researching it on the web and have tried different things >> but none seem to consistently work for me. >> > >> > If I make a row like so: >> > >> > >> > <div class="row"> >> > <div class="span4">Row 1</div> >> > <div class="span4">Row 2</div> >> > <div class="span4">Row 3</div> >> > </div> >> > >> > And add padding to any of the elements: >> > >> > .box { >> > padding-left:10px; >> > } >> > >> > <div class="row"> >> > <div class="box span4">Row 1</div> >> > <div class="box span4">Row 2</div> >> > <div class="box span4">Row 3</div> >> > </div> >> > >> > It breaks every time. I tried modifying the margin as some suggest. >> Sometimes I get things to work (a hack) and sometimes I do not. Sometimes >> I wrap different things in other divs. Is there a consistent way I can do >> this that will work every time? >> > >
