Sorry to say it but I'm still learning how bs fluid layouts work, so I didn't have much luck with your 30 column layout. But I think most of the problems you are experiencing is to do with your markup. I'm sure you can change the grid values to suit your project. I played around with the markup from the examples page<http://twitter.github.com/bootstrap/examples/fluid.html>to get something close to what you image looks like - hope it helps.
<!doctype html> <head> <link rel="stylesheet" href=" http://twitter.github.com/bootstrap/assets/css/bootstrap.css"; type="text/css" media="screen" title="no title" charset="utf-8"> <link rel="stylesheet" href=" http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css"; type="text/css" media="screen" title="no title" charset="utf-8"> <style> .red{background:#ed365b;} .blue{background:#4169e1} </style> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12 well blue"> <p>TOP BAR</p> </div> </div> <div class="row-fluid"> <div class="span8"> <div class="row-fluid"> <div class="span12 well red"> <h2>Content</h2> <p>Dit fermentum massa justo sit amet risus.</p> <p><a class="btn" href="#">View details »</a></p> </div><!-- /row-fluid --> <div class="row-fluid"> <div class="span12 well red"> <h2>Content</h2> <p>Donec id elit non mi porta gravida at eget metus.</p> <p><a class="btn" href="#">View details »</a></p> </div> </div><!-- /row-fluid --> </div><!-- /span8 --> </div><!-- /row-fluid --> <div class="span4"> <div class="well"> <h2>SideBar</h2> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.</p> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.</p> </div><!--/.well --> </div> </div> <div class="row-fluid"> <div class="span12 well blue"> <h2>Big blue part</h2> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod.</p> </div> </div> </div> </body> </html> Phil DoughtyWeb Designer / Guitarist Phone: +971 50 8879936 On 28 June 2012 23:52, JJ <[email protected]> wrote: > @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> >> >>
