clearing without a wrapping 'row' container

Question

Is there a way to clear after the last element of a row without a wrapping container per row? The column sizes inside will vary, there is a 'last' class, can I clear after that div is closed? I can't add anything to the markup.

Markup:

<div class="grid-row">
   <div class="col-6">
     col 6   
  </div>
  <div class="col-6 last">
     col 6   
  </div> 
 <!-- Need to clear here -->
  <div class="col-4">
      col 4   
  </div>
  <div class="col-4">
      col 4  
  </div>
  <div class="col-4 last">
      col 4  
  </div>
  <!-- Need to clear here -->
</div>

Do you have an idea of how you want to clear this? Javascript? jQuery? — Bobo, Aug 21 '14 at 15:54
I was hoping for a CSS solution but I don't think it's possible. So Jquery would be be the next option. — sarah3585, Aug 21 '14 at 15:55

BoltClock · Accepted Answer · 2014-08-21T16:21:54.270

1

For every .last column that has following siblings (is not the last child), you can simply introduce clearance with the next sibling:

.grid-row .last + div {
    clear: both;
}

As for the very last child, you can either use a clearfix :after pseudo-element on .grid-row:

.grid-row:after {
    content: '';
    display: table;
    clear: both;
}

Or you can have the element following .grid-row introduce clearance, in much the same way as the first CSS rule above.

edited Aug 21 '14 at 16:21

answered Aug 21 '14 at 15:58

BoltClock

700,868
160
1,392
1,356

Why wouldn't you recommend `:after` on `.grid-row`? – 0b10011 Aug 21 '14 at 16:17
@bfrohs: Actually on second thought, it makes sense here, since it would basically serve the same purpose as other elements in the first CSS rule. – BoltClock Aug 21 '14 at 16:20
Looks to do the trick! Will have a further play then mark it as answer! Thank you. – sarah3585 Aug 21 '14 at 16:49

clearing without a wrapping 'row' container

1 Answers1