Keeping float left div on the same line - html

Question

<style>
.holder{
width:3in;
height:4in;
background:aqua;
}
.orangeBox{
float:left;
background:orange;
width:1in;
height:1.5in;
}
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1in;
}
</style>
<div class="holder">
<div class="orangeBox">R</div>
<div class="yellowBox">1</div>
<div class="yellowBox">2</div>
<div class="yellowBox">3</div>
<div class="yellowBox">4</div>
<div class="yellowBox">5</div>
<div class="yellowBox">6</div>
<div class="yellowBox">7</div>
<div class="yellowBox">8</div>
<div class="yellowBox">9</div>
<div class="yellowBox">10</div>
<div class="yellowBox">11</div>
</div>
What I'm trying to achieve is to have the individual boxes float left (which they're doing) but also to stay on the same line.
In the example here I want box 5 to NOT appear under box R, but rather to automatically wrap to the next full line.
I know this can be achieved via float:right, but that would reverse all the numbers, making everything backwards.
https://jsfiddle.net/o4eem3za/

Answer 1

You can clear every other element after the 6th element:
Updated Example
.yellowBox:nth-child(2n + 6) {
clear: left;
}
Alternatively, depending on the desired results, you could also just clear the 6th element as well:
Updated Example
.yellowBox:nth-child(6) {
clear: left;
}

Answer 2

Shouldn't you just make both boxes orange and yellow same height?
Right now you have orangebox 1.5in and yellowbox 1in heigh. Set 1.5 for yellowbox also and it will fix your issue.
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1.5in; /* changed this from 1in to 1.5in */
}
Fiddle: https://jsfiddle.net/Munja/o4eem3za/1/

Answer 3

If you are looking for a grid pattern, where you have distinct rows, I'd recommend display:table and display:table-cell. (EDIT: discard the display:table stuff, if you're floating R right - unnecessary)
<style>
.holder{
width:3in;
height:4in;
background:aqua;
}
.orangeBox{
float:right;
background:orange;
width:1in;
height:1.5in;
margin-bottom:.5in;
}
.yellowBox{
float:left;
background:yellow;
width:1in;
height:1in;
}
</style>
<div class="holder">
<div class="orangeBox">R</div>
<div class="yellowBox">1</div>
<div class="yellowBox">2</div>
<div class="yellowBox">3</div>
<div class="yellowBox">4</div>
<div class="yellowBox">5</div>
<div class="yellowBox">6</div>
<div class="yellowBox">7</div>
<div class="yellowBox">8</div>
<div class="yellowBox">9</div>
<div class="yellowBox">10</div>
<div class="yellowBox">11</div>
</div>
EDIT: This still uses floats, but it leverages the special display attributes of table cells. Change the width of the .holder to 4 and you will see it functions as you'd expect.
EDIT v2: Changed orangeBox to float right, added .5 margin to bottom, removed display:table stuff (unnecessary if floating per poster's comment)

Answer 4

With display: inline-block you can achieve it
https://jsfiddle.net/o4eem3za/4/
display:inline-block