Geek asks and answers

Offset the vertical position of div elements inside Twitter Bootstrap

I am trying to correctly vertically align offset elements using Twitter Bootstrap with a fluid mesh. (Note: the grid is set to 30 columns)

Given the red squares, this is an attempt to place a div: http://imgur.com/IkB2G This is the current actual placement with my code: http://imgur.com/oJ2mG

Here is the code I'm using. It is not clear how to make the bottom red box move into the empty space above it, onto 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>
+5
source share
1 answer

, . , . , , .

<div class="row">
    <div class="span18">
        <div class="row">
            <div class="span18">This is a row on the left side.</div>
        </div>
        <div class="row">
            <div class="span18">This is a row on the left side.</div>
        </div>
    </div>
    <div class="span12">
        This is the content on the right side.
    </div>
</div>
+4

More articles:


All Articles