Positioning of divs, when creating a HTML/CSS only treemap

Question

I am fairly new to CSS, but I want to know if there's an easier way to order these boxes, as I need something like a treemap, which links to a certain page, as you can see, have some animations. Currently I want to order this third box below the second one, and I don't know how, I'm trying with float and clear, but doesn't work for me. Excuse my beginner knowledge, but I'm learning. Also, if there's an easier way to do this, except manually like I'm doing, let me know please.

    .cbox1 {
    border:solid 2.5px white;
    position:relative;
    float:left;
    z-index: 10;
    }

    .cboxtext {
    text-align:center;
    height:50%;
    margin-top: 200px;
    color:#fff;
    }

    .cboxpercentage {
    text-align:center;
    font-size:80px;
    font-weight: bold;
    color:#fff;
    margin-top: -300px;
    }

    <a href="#">
        <div class="cbox1 hvr-bounce-out" style="width:400px; height:400px;background-color:steelblue;">
	        <h2 class="cboxtext"> Company 1 </h2>
	        <h1 class="cboxpercentage"> 62,5% </h1>
            </div></a>
	    <a href="#">
    <div id="wrapper">
	    <div class="cbox1 hvr-sink" style="width:200px; height:200px; background-color:dodgerblue;">
	        <h2 class="cboxtext" style="font-size:24px; margin-top:90px;"> Company 2 </h2>
	        <h1 class="cboxpercentage"> 32,5% </h1>
            </div></a>
        <a href="#">
            <div class="cbox1 hvr-float" style="width:200px; height:200px; background-color:blue;">
                <h2 class="cboxtext"> Company 3 </h2>
                <h1 class="cboxpercentage"> 5% </h1>
            </div>
        </a>
        </div>

Answer 1

It's a new version of your code:

    .cbox1,#wrapper {
        position: relative;
    }
    .cbox1 a,#wrapper a {
        text-decoration: none;
        display: block;
        width: 400px;
        height: 400px;
    }
    .cbox1 a span,#wrapper a span {
        display: block;
        position: absolute;
        width: 100%;
        line-height: 400px;
    }

    .cbox1 a span.cboxtext,#wrapper a span.cboxtext {
        line-height:30px;
    }

    .cbox1 {
        width: 400px;
        height: 400px;
        float: left;
    }

    a .cboxtext {
        top: 10px;
        text-align:center;
        color:#fff;
    }

    .cboxpercentage {
        text-align:center;
        font-size:80px;
        font-weight: bold;
        color:#fff;
    }

    #wrapper {
        float: left;
        width: 200px;
    }

    #wrapper a span {
        line-height: 200px;
    }

    #wrapper .cbox1 {
        width: 200px;
        height: 200px;
    }

    #wrapper .cbox1 a {
        width: 200px;
        height: 200px;
    }

    #wrapper .cboxpercentage {
        font-size:40px;
    }

<div class="cbox1 hvr-bounce-out" style="background-color:steelblue;">
    <a href="#">
        <span class="cboxtext">Company 1</span>
        <span class="cboxpercentage"> 62,5% </span>
    </a>
</div>
<div id="wrapper">
    <div class="cbox1 hvr-sink" style="background-color:dodgerblue;">
        <a href="#">
            <span class="cboxtext">Company 2</span>
            <span class="cboxpercentage">32,5%</span>
        </a>
    </div>
    <div class="cbox1 hvr-float" style="background-color:blue;">
        <a href="#">
            <span class="cboxtext">Company 3</span>
            <span class="cboxpercentage">5%</span>
        </a>
    </div>
</div>