Содержание выходит за пределы div и в следующий div

Question

Если содержимое левого div больше, чем правый div, то содержимое left div выходит за пределы родительского контейнера div и в следующий div.

HTML:

<div class="musictemplate_container">
    <div class="musictemplate_left">
        something<br>
        omething<br>
        omething<br>
        omething<br>
        omething<br>
        omething<br>
        omething<br>
        omething<br>
    </div>
    <div class="musictemplate_right">
        right1
    </div>
</div>

CSS:

.musictemplate_container {
    width: 100%;
    margin: 0 auto;
}

.musictemplate_left {
    width: 20%;
    float: left;
    padding: 30px;
}

.musictemplate_right {
    width: 80%;
    padding: 30px;
}

Answer 1

Кажется, работает нормально для меня. Единственный случай, когда он попадет в соседний div - это действительно длинное слово со многими символами, что заставляет его не разрываться должным образом. но чтобы избежать перетекания независимо, вы просто объявляете свойство переполнения:

.musictemplate_left {
width: 20%;
float: left;
padding: 30px;
overflow: hidden; 
}