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

Accepted Answer

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;
}
```

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

Solution

Problem