Div in Div: макет вопроса

Question

Я создал следующий макет:

<div class="title" id="m1">
    <div class="chkbx">something</div>
    <div class="name">
        <a href="#" onclick="doSomething('1');">Dummy #1</a>
    </div>
</div>
// .. the div above repeats several times

Я использую следующий CSS:

div.title { border: 1px black solid; }
div.chkbx {
    clear:both;
    float:left;
    padding:2px;
    text-align:right;
    width:5%;
}
 div.name {
    float:left;
    width: 50%;
}

и ожидал бы границы вокруг всего class=title, но наверху видим только некоторые странные линии Пожалуйста, дайте мне знать, что я делаю неправильно.

Большое спасибо!

Answer 1

Вы, вероятно, перемещаете содержимое. Установите overflow: hidden на контейнере.

• http://complexspiral.com/publications/containing-floats/ объясняет, почему вы получаете такое поведение
• http://www.ejeliot.com/blog/59 перечисляет различные способы избежать этого, большинство из которых лучше, чем описанные выше, и включает подход переполнения.

Answer 2

Попробуйте добавить еще один элемент в .title в стиле clear: both;.

Ваш .title elemnt содержит только плавающие элементы, а плавающие элементы не растягивают свои родительские элементы, поэтому элемент .title отображается так, как если бы он был пустым.

Answer 3

Здесь вы ошиблись, потому что пропустили четкую сторону DIV. Если вы используете div с float: left / right, для начала новой строки вы должны использовать clear: оба с div.

- ПРОСТО ДОБАВЬТЕ ОДИН РАЗМЕР С ОЧИСТКОМ: ОБА;

<div class="title" id="m1">
<div class="chkbx">something</div>
<div class="name">
    <a href="#" onclick="doSomething('1');">Dummy #1</a>
</div>
<div style="clear:both;"></div>
</div>