Coisas de iniciantes: Como impedir que as Divs CSS se sobreponham?

Question

Jul 08, 2013, 09:43 PM

Coisas de iniciantes: Como impedir que as Divs CSS se sobreponham?

Primeira pergunta, comecei a trabalhar com CSS cerca de um mês atrás devido a um trabalho que recebi, mas parece que encontrei alguns problemas que não posso consertar (principalmente devido à minha inexperiência e que é CSS de outra pessoa)

Eu não vou bater muito na mata e explicar o problema antes de mostrar o código. Há um conjunto de Div's em uma configuração de formulário, mas quando o texto fica muito lotado ele invade o próximo Div, consertando-o via CSS e não HTML, alguma correção sobre isso? Do próprio problema eu posso imaginar que é algo tão fácil, é bobo, mas bem, sim.

Edit: Eu meio que esqueci de mencionar essa parte, eu não quero que eles sejam escondidos, eu quero cada div para permitir automaticamente que o "anterior" para terminar é concêntrico sem sobrepor (Tentei com overflow: Auto, mas deu-lhes barras de rolagem, para todos os formulários em todo o site.

Aqui está uma foto de como parece no momento, tenho certeza que você verá o problema imediatamente

http://imgur.com/aj8pDaO

Aqui está o HTML relevante

<html>
<head>
    <link href="hue.css" rel="stylesheet">
</head>
<body>
    <div class="content">

        <div class="column">
            <div class="form">
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationRfc">RFC</label><label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationTaxSystem">Regimen    fiscal</label><label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationTaxAddress">Domicilio  fiscal</label><label id="cfdiCreate:organizationTaxAddress">XXXXXX Colonia Tecnológico  Monterrey,Nuevo León,México.C.P.XXXXXX</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationExpeditionPlace">Lugar de  expedición</label><label id="cfdiCreate:organizationExpeditionPlace">Suc.1 Chiapas,México.     </label>
                </div>
            </div>
        </div>
        <div class="column secondary">
            <!--?xml version="1.0" encoding="UTF-8"?-->
        </div>
</body>
</html>

E aqui está o CSS

body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: center;
}

p {
    text-align: left;
}

.content {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    float: left;
    background: #;
    text-align: left;
}

    .content label, .content p {
        font-size: 16px;
        color: #024DA1;
        padding-left: 2%;
    }

.column {
    display: block;
    float: left;
    width: 48%;
    margin-top: 15px;
    height: auto;
    background:;
}

.secondary {
    margin-left: 10px;
}

.clearfix {
    clear: both;
    margin-bottom: 10px;
}

.form {
    display: block;
    width: 96%;
    height: auto;
    background:;
}

.form-nivel {
    display: block;
    width: 100%;
    width: 470px;
    min-height: 20px;
    margin-bottom: 20px;
    position: relative;
}

    .form-nivel label {
        width: 160px;
        float: left;
        height: 20px;
        line-height: 20px;
        margin-right: 10px;
        text-align: right;
    }