Desplazamiento de la posición vertical de los elementos div dentro de Twitter Bootstrap

Question

Estoy intentando alinear verticalmente correctamente los elementos de compensación utilizando Twitter Bootstrap con una grilla fluida. (Nota: la rejilla está personalizado para 30 columnas)

Teniendo en cuenta los cuadros de color rojo, esto es la colocación div intentado: http://imgur.com/IkB2G Esta es la colocación real actual con mi código: http://imgur.com/oJ2mG

Aquí está el código que estoy utilizando . No está seguro de cómo hacer que la caja roja inferior se mueva hacia el espacio vacío que está arriba, de acuerdo con las imágenes.

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

Answer 1

Debe considerarlo como 2 columnas, y en la columna de la izquierda tiene filas anidadas. No puedo distinguir el tamaño correcto del código que publicaste. Pero con suerte este código te dará algo de inspiración.

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