setting two divs side by side and third one below that

Question

How do I setup two div's side by side and the third one below that like this

.

My current code is as below which puts note div after name div

HTML:

<div id="info_div">
    <div id="info_div_name">Name</div>
    <div id="info_div_time">6:30 PM</div>
    <div id="info_div_note">Note</div>
</div>

CSS:

#contact_table_data {
    width:inherit;
    height:inherit;
    background-color:#99cc33;
    max-width:400px;
}

#info_div_name {
    width:auto;
    height:auto;
    padding: 5px 0px 5px 10px;
    float:left;
}

#info_div_time {
    width:auto;
    height:auto;
    padding: 5px 10px 5px 0px;
    float:right;
}

#info_div_note {
    width:inherit;
    height:auto;
    position:static;
    padding: 0px 10px 5px 10px;
}

Answer 1

The following code will do. You should have to clear the floats.

#info_div_note {
clear: both;
width: inherit;
height: auto;
position: static;
padding: 0px 10px 5px 10px;
}    

Answer 2

You need to clear: both;

Add CSS

#info_div_note {
    clear:both;
}

DEMO