@gridColumns: 30; @gridColumnWidth: 26px; @gridGutterWidth: 6px; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns));
// Fluid grid // ------------------------- @fluidGridColumnWidth: 2.7253669%; @fluidGridGutterWidth: 0.6289308%; On Thursday, June 28, 2012 1:03:03 PM UTC-6, JJ wrote: > > I'm attempting to correctly vertically align offsetting elements using > Twitter Bootstrap with a fluid grid. (Note: Grid is customized to 30 > columns). Considering the red boxes, this is the attempted div placement. > > > <https://lh6.googleusercontent.com/-GkIO6sKjwik/T-yqGTC81II/AAAAAAAAAFs/dYwNK3ZGaFU/s1600/goal+alignment.jpg> > > This is the current actual placement with my code: > > > <https://lh3.googleusercontent.com/--1Mk5HHOPHI/T-yqR88nobI/AAAAAAAAAF0/wrYedRd-su0/s1600/current+failed+alignment.jpg> > > Here is the code I am using. Unsure how to get the lower red box to move > into the empty space above it, per the images. > > <div class="container-fluid nomargin"> > <div class="row-fluid span30 nomargin"><div style="height:10px"></div></div> > <!-- Vertical spacing between menu and content--> > <div class="row-fluid"> > <div class="span4"></div> > <div class="span16 white-box"> > <!--Body content--> > <div style="height:100px"></div> > </div> > <div class="span6 white-box"> > <!--Body content--> > <div style="height:300px"></div> > </div> > > <div class="span16 white-box"> > <!--Body content--> > <div style="height:100px"></div> > </div> > </div> > >
