CSS div coming inline

Question

I am currently building a contact form. Code :

<div id="contact_form">
            <form action="contact.php" method="post">

                <div class="contact_fields">
                    <div class="cf1">NAME</div>
                    <div class="cf2">
                        <input type="text" name="name" />
                     </div>
                </div>

                <div class="contact_fields">     
                    <div class="cf1">EMAIL</div>
                    <div class="cf2">
                        <input type="text" name="name" />
                     </div>
                </div> 

                 <div class="contact_fields">     
                    <div class="cf1">PHONE</div>
                    <div class="cf2">
                        <input type="text" name="name" />
                     </div>
                </div> 

            </form>
        </div>

And The CSS :

#contact_form
{
    padding:12px 20px 10px 20px;
    background:#f5f5f5;
    overflow:hidden;
    width:700px;
}

.contact_fields
{
    width:580px;
    margin-top:20px;    
}

.cf1
{
    width:80px;
    float:left;
    color:#333333;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size:14px;
}
.cf2
{
    width:280px;
    float:left;

}
.cf2 input
{
    height:25px;
    width:280px;
}

But the divs contact_fields are coming inline,instead of div with a break(see the image I have attached.) Please offer me a solution

Answer 1

Now define your parent .contact_fields overflow:hidden;

As like this

.contact_fields
{
overflow:hidden;    
}

Demo

Answer 2

Get rid of your float: left;

Demo

.cf2 {
    width:280px;
    float:left; <----Here
}