Beginner's stuff: How to stop CSS' Divs from overlapping?

Question

First question ever, I started working on CSS about a month ago due to a job I got, but it seems I have encountered some problems I can't fix (mainly due to my inexperience and that it's someone else's CSS)

I won't beat around the bush so much and explain the problem before showing the code. There are a set of Div's in a form-like setting, but when the text get's too crowded it invades the next Div so, fixing it via CSS and not HTML, any fix on this? From the very problem I can imagine it's something so easy it's silly, but well, yeah.

Edit: I kinda of forgot to mention that part, I don't want them to be hidden, I want each div to automatically allow for the "previous" one to finish it's concent without overlapping (Tried with overflow: Auto but it gave them scrollbars, to all the forms in the whole site.

Here's a pic of how it looks at the moment, I'm sure you will see the problem right away

https://i.stack.imgur.com/wBrLL.jpg

Here's the relevant HTML

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

And here's the 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;
    }

What solution are you looking for? Do you want to hide the excess text? Do you want it to wrap? Are you expecting something else? — André Dion, Jul 08 '13 at 19:49
I kinda of forgot to mention that part, I don't want them to be hidden, I want each div to automatically allow for the "previous" one to finish it's concent without overlapping (Tried with overflow: Auto but it gave them scrollbars, to all the forms in the whole site. — Xionico, Jul 08 '13 at 19:52

score 9 · Accepted Answer · edited Jan 09 '14 at 16:52

9

Here. You are applying a CSS rule to all the labels. The overlapping happens because of this rule.

float: left;

To fix this, remove the .form-nivel label rule and add these.

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

.form-nivel label:nth-child(2) {
    width: 160px;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: right;
}

edited Jan 09 '14 at 16:52

Ian Campbell

2,678
10
56
104

answered Jul 08 '13 at 20:10

Stephen Rodriguez

1,037
1
12
22

The reason for nth-childs is because I assume you are assembling this info as a column format. This will make sure that any further entries reflect this column/table like nature. **I do recommend using tables in the future. – Stephen Rodriguez Jul 08 '13 at 20:11
Your solution seems to be the one working best, and yes, I'm a newbie at this and on top of all, it isn't even my own code (they sent it to me to fix it...), so I'm having some problems, I will actually try doing it in a table as well. For now the text seems to be formating itself after changing that, but the problem is in the third line, the second line of Address info starts at the very left of the screen, know any way to align it to where the first line started? – Xionico Jul 08 '13 at 20:20
Try redoing it as a table. The table will help resolve the alignment issue. If not, let me know. Heres a link on basic tables in HTML. http://www.w3schools.com/html/html_tables.asp – Stephen Rodriguez Jul 09 '13 at 00:14

score 2 · Answer 2 · answered Jul 08 '13 at 19:46

2

you can use overflow:hidden to hide the content if it overflows into the next one

answered Jul 08 '13 at 19:46

Keith

4,059
2
32
56

1

I kinda of forgot to mention that part, I don't want them to be hidden, I want each div to automatically allow for the "previous" one to finish it's concent without overlapping (Tried with overflow: Auto but it gave them scrollbars, to all the forms in the whole site. – Xionico Jul 08 '13 at 19:49

score 1 · Answer 3 · edited Jan 09 '14 at 16:53

The CSS logic for the left labels and the right labels are the same.

First thing you should do is set them apart.

<div class="form-nivel">
    <label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
    <label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>

Notice the added class

Then on your css you would do something like this:

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

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

I made the right labels bigger and aligned them to the left.

Also, you should add:

<meta charset="utf-8">

on the html head. This is to be able to display characters with accents.

Thanks for the tips! Right now I'm trying this method as well, but doesn't seem to have made much difference after dividing them in left and right labels (a problem on my end, I'm sure), and yes, just added that meta charset, worked wonders! — Xionico, Jul 08 '13 at 20:21

score 0 · Answer 4 · answered Jul 08 '13 at 19:55

0

Why not simply keep your <label/>s inline? Removing all the unneccessary declarations...

.form-nivel label {
    margin-right: 10px;
    line-height: 20px;
}

answered Jul 08 '13 at 19:55

André Dion

21,269
7
56
60

score 0 · Answer 5 · answered Jul 08 '13 at 20:08

Try adding:

<div class="clearfix"></div>

between each row.

<div class="form-nivel">
    <label for="cfdiCreate:organizationRfc">RFC</label>
    <label        id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
<div class="clearfix"></div>
<div class="form-nivel">
    <label for="cfdiCreate:organizationTaxSystem">Regimen    fiscal</label>
    <label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
</div>

Beginner's stuff: How to stop CSS' Divs from overlapping?

5 Answers5

Linked