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>
