Div in Div: layout question

Question

I created the following layout:

<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

I'm using the folowing 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%;
}

and would expect a border around all of class=title, but see only some strange lines at the top. Please let me know what I do wrong.

Many many thanks!

Answer 1

You are probably floating the content. Set overflow: hidden on the container.

• http://complexspiral.com/publications/containing-floats/ explains why you get this behaviour
• http://www.ejeliot.com/blog/59 lists various ways to avoid it, most of which are better than those described above, and including the overflow approach.

Answer 2

Try adding one more element in .title with clear: both; style.

Your .title elemnt contains only floated elements, and floated elements don't stretch their parent elements, so .title element is rendered as if it were empty.