Tips on coding this layout with Twitter Bootstrap

Question

I am trying to make this layout with Twitter Bootstrap (only the boxes) :

Basically, it is a youtube embedded video and two equal size boxes to its right.

I have this right now (haml) :

.row
  .span8
    / embedded code
  .span4
    / I need to put two boxes here... how?

Answer 1

You can stack the .span* blocks inside a .row-fluid container which you can then nest inside another span* block to create the effect you're looking for. Try this for example:

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div class="big box">
                box
            </div>
        </div>
        <div class="span3">
            <div class="row-fluid">
                <div class="span3">
                    <div class="box">
                        box
                    </div>
                </div>
                <div class="span3">
                    <div class="box">
                        box
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Notice how i nested the two side blocks one on top of each other contained within a .row-fluid container inside a another .span* block t stack them up.

Now with a little CSS you we can stretch the stacked .span* blocks to the width of the parent block to create a column:

CSS

.row-fluid [class*="span"] .row-fluid [class*="span"] {
    margin-left: 0;
    width: 100%;
}

Demo: http://jsfiddle.net/k27S5/show/

Don't know much of HAML but after taking a look at the documentation the setup should look something like this:

HAML

.container-fluid
  .row-fluid
    .span9
      content
    .span3
      .row-fluid
        .span3
          content
        .span3
          content