Put contour in split div

Question

Put contour in split div

Navigation

#1 by (2 votes)

2

I'm trying to put a box around my form. So far so good, but now when I want to split the form in half that same box around the form crashes.

<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 float: right to put content to the right it happens:

That is, the divCaixa class no longer circumvents the form

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

html css

asked by anonymous 02.05.2014 / 13:57

1 answer

Generate PDF with specific font Save entities with one-to-many relationship using WebAPI

score 2 · Accepted Answer

This is because the div has floated 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;
}