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]>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]> 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? >
