Bootstrap, clear both doesn't work properly

Problem

I'm using bootstrap front-end framework.

I want to get the following result: two columns:

  1. in the first two rows of four columns
  2. Second one large column

The sample code below, but it does not work .. see jsfiddle

There is padding on the left side in the new row to the first column

  <div class="row-fluid">
    <div class="span7 tlo">
        <div class="span3 tlo2 my_height_box">aabc</div>
        <div class="span3 tlo2 my_height_box">aabc</div>
        <div class="span3 tlo2 my_height_box">aabc</div>
        <div class="span3 tlo2 my_height_box">aabc</div>
        <div style="clear: both;" class="span3 tlo2 my_height_box">aabc</div>
        <div class="span3 tlo2 my_height_box">aabc</div>
        <div class="span3 tlo2 my_height_box">aabc</div>
        <div class="span3 tlo2 my_height_box">aabc</div>
    </div>
    <div class="span5 tlo2">
        <h1>AWESOME extra text!</h1>
        <h2>THIS i s really C00L</h2>
        <h3>My files, my problems ;)</h3>
    </div>
  </div>


Any suggestions?

Problem courtesy of: breq

Solution

You should use nested row-fluids to accomplish this: http://jsfiddle.net/QQRN4/7/

<div class="row-fluid">
    <div class="span7 tlo">
        <div class="row-fluid">
            <div class="span3 tlo2 my_height_box">aabc</div>
            <div class="span3 tlo2 my_height_box">aabc</div>
            <div class="span3 tlo2 my_height_box">aabc</div>
            <div class="span3 tlo2 my_height_box">aabc</div>
        </div>
        <div class="row-fluid">
            <div class="span3 tlo2 my_height_box">aabc</div>
            <div class="span3 tlo2 my_height_box">aabc</div>
            <div class="span3 tlo2 my_height_box">aabc</div>
            <div class="span3 tlo2 my_height_box">aabc</div>
        </div>
    </div>
    <div class="span5 tlo2">
         <h1>AWESOME extra text!</h1>
         <h2>THIS i s really C00L</h2>
         <h3>My files, my problems ;)</h3>
    </div>
</div>
Solution courtesy of: Michal

Discussion

It's because you use:

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

and

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

You can remove left margin from div with clear:

<div style="clear: both; margin-left: 0px;" class="span3 tlo2 my_height_box">aabc</div>

jsfiddle

Or replace left margin from all this divs with margin-right

Discussion courtesy of: YD1m

This recipe can be found in it's original form on Stack Over Flow.