:nth-child with rows to clear floats

by sulfureous

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="row-fluid">
    <div class="row-fluid">
        <div class="span6">1</div>
        <div class="span6">2</div>
    </div>
        <div class="row-fluid">
        <div class="span6"><p>This Div has more content than usuak to provoke que issue of things not wrapping as you wish they would. My only suggestion is to put things in different rows so it clears. Otherwise you will be looking at a lot heavier modification as my original answer states.</p></div>
    <div class="span6">4</div>
    </div>
        <div class="row-fluid">
        <div class="span6">5</div>
        <div class="span6">6</div>
    </div>
    <div class="row-fluid">
        <div class="span6">7</div>
        <div class="span6">8</div>
    </div>
</div>

CSS

div.row-fluid div.span6 {
  background: #ccc;
  border-radius: 8px;
  margin-bottom: 10px;
  text-align: center;
}