2

Estou a tentar colocar uma caixa à volta do meu formulário. Até aqui tudo bem, mas agora quando pretendo dividir o formulário ao meio essa mesma caixa à volta do formulário deixa de funcionar.

<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>

Quando uso o float: right para colocar o conteúdo à direita acontece:inserir a descrição da imagem aqui

Ou seja, a classe divCaixa deixa de contornar o fomulário

.divCaixa {
   border: 1px solid #d5d5d5;
   padding:20px 20px 20px 20px; 
   border-radius: 1px;
   width:95%;
}
1
  • Um script para colocar o tamanho da div com o tamanho da tabela, resolveria? 2/05/2014 às 12:18

1 Resposta 1

2

Isso ocorre porque o div possui conteúdo flutuado, que é desconsiderado no cálculo das dimensões. Acrescente overflow: hidden para resolver:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .