Frank Underwood Frank Underwood - 2 months ago 7
CSS Question

How to get divs on to new line

See the following codepen for demo: http://codepen.io/anon/pen/PGPJOG

<div class="col-1-3 bg-green">green</div>

<div class="col-1-3 bg-green">

<div class="col-1-3 bg-blue">
blue<br/>blue<br/>blue<br/>blue<br/>
</div>
<div class="col-1-3 bg-blue">
blue
</div>
<div class="col-1-3 bg-blue">
blue
</div>

</div>

<div class="col-1-3 bg-green">green</div>

<div class="col-1-3 bg-pink">pink</div>
<div class="col-1-3 bg-pink">pink</div>
<div class="col-1-3 bg-pink">pink</div>


I have two rows/sets of cells, first row/set has green background, second has pink.
Inside one of the cells (second) in the first row/set, the green one, I have a nested row/set which has the colour blue.

My question is, how do I get the pink row/set to show up on a new line, below the first! green cell. currently the pink ones gets stacked under the last green cell.

I believe this is where I need to use clearfix solutions, and wrap each set of cells in yet another div and call it 'row' for example.
Is there a way to do it without a 'row' wrapper, I feel there should be, as long as the cells add up to 100% width.

Desired result: http://imgur.com/a/8pdry

thanks in advance!

Answer

Add this after the 3rd green div:

<div class="clearfix"></div>

then add this to your css:

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

Or you can also clear every third + 1 .col-1-3 child (without the extra div):

.col-1-3:nth-child(3n+1) {
    clear:left;
}

Or with a clear class which you add to every first element of a row:

.col-first {
    clear:left;
}