Fix this grid using CSS Floats (or another method)

Question

I want to achieve this grid layout using floats (or another method):

But I cannot get to move grid number 8 (numbering in natural order left to right top to down) to occupy its position in left. HTML:

<div class="blockContainer">

                    <ul id="RnP" class=" rnp">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li id="bigbox">6</li>
                        <li >7</li>
                        <li >8</li>
                        <li>9</li>
                        <li>10</li>
                        <li>11</li>
                        <li>12</li>
                        <li>13</li>
                    </ul>
                </div>

CSS:

.blockContainer{
    position: absolute;
    top:20%;
    left:20%;
    border:1px solid red;
    width: 37em;
}
.rnp li{
    background: blue;
    width: 8em;
    height: 8em;
    color: yellow;
    margin-left: 1em;
    margin-top: 1em;
    float: left;
    padding: 0;
    list-style: none;
}
#bigbox{
    width: 17em;
    height: 17em;   
}
.rnp{
    margin: 0px;
    padding: 0px;
}

JS FIDDLE:http://jsfiddle.net/ebbj2sch/

Answer 1

Working solution in this Fiddle

this is not the optimal solution, but it may work for you. I'm assuming that your layout is fixed (the number of boxes, the order and etc').

also: in your fiddle, you used em for units, so i'll do the same. (that's the reason I had to remove white spaces between the <li> in the HTML.)

HTML

<div>
    <ul>
        <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li id="Big">6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
div{
    border: 1px solid red;
    width: 37em;
}
ul
{
    position: relative;
    list-style: none;
}
li {
    background: blue;
    width: 8em;
    height: 8em;
    color: yellow;
    display: inline-block;
    margin-left: 1em;
    margin-top: 1em;
}
#Big
{
    width: 17em;
    height: 17em;
}
#Big + li + li
{
    position: absolute;
    top: 18em;
    left: 0;
}
#Big + li + li + li
{
    position: absolute;
    top: 18em;
    left: 27em;
}

Answer 2

I don't think it's possible with the markup you are using. Maybe with flexbox but an easier way would be to wrap the boxes next to the big one in an extra element.

<div class="blockContainer">
    <div id="RnP" class=" rnp">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div>
            <div class="box">5</div>
            <div class="box">6</div>
        </div>
        <div id="bigbox">7</div>
        <div>
            <div class="box">8</div>
            <div class="box">9</div>
        </div>
        <div class="box">10</div>
        <div class="box">11</div>
        <div class="box">12</div>
        <div class="box">13</div>
    </div>
</div>

And change the CSS to something like:

.blockContainer{
    position: absolute;
    top:20%;
    left:20%;
    border:1px solid red;
    width: 37em;
}
.rnp .box{
    background: blue;
    width: 8em;
    height: 8em;
    color: yellow;
    margin-left: 1em;
    margin-top: 1em;
    padding: 0;
    list-style: none;
}

.rnp > div{
    float: left;
}

#bigbox{
    width: 17em;
    height: 17em;   
}
.rnp{
    margin: 0px;
    padding: 0px;
}