Place border in split div

Question

I’m trying to put a box around my form. So far so good, but now when I intend to divide the form in half this same box around the form ceases to work.

<div class="formCreate " style="width: 95%">
    <div class="divCaixa">
        <div style="width: 50%; float: left;">
            <table border="1" style="width: 100%;">
                <tr>
                    <td>Série:</td>
                    <td>&nbsp</td>
                    <td>
                        @Html.DropDownList("Serie", (SelectList)ViewBag.Series, "", new { @class = "form-control input-sm" })
                    </td>
                    <td>&nbsp</td>
                    <td>Nº Contrato:</td>
                    <td>&nbsp</td>
                    <td>@Html.TextBoxFor(model => model.NumDoc, new { @class = "form-control input-sm", id = "NumDoc", onchange = "validaSerieNumDocExistentes()" })</td>
                </tr>

            </table>
        </div>
        <div style="width: 50%; float: right;">
            <table border="1" style="width: 100%;">
                <tr>
                    <td>asdasd</td>
                </tr>
            </table>
        </div>
    </div>
</div>

When I use the float: right to put the contents to the right happens:

That is, the class divCaixa no longer circumvents the body

.divCaixa {
   border: 1px solid #d5d5d5;
   padding:20px 20px 20px 20px; 
   border-radius: 1px;
   width:95%;
}

Answer 1

This is because the div has floating content, which is disregarded in the calculation of dimensions. Add overflow: hidden to solve:

.divCaixa {
   border: 1px solid #d5d5d5;
   padding:20px 20px 20px 20px; 
   border-radius: 1px;
   width:95%;
   overflow: hidden;
}