用了float后div块之间的上下顺序不对了,该如何处理 _HTML/CSS

用了float后div块之间的上下顺序不对了
先看代码

HTML code


<div id="formpanel">
               <form>
          <div id="username_field">
                    <div id="usernamepic">
                        <img src="images/images/images/username_06.jpg"/>
                    </div>
                    <div id="inputfield">
                        <input type="text" style="width:227px; height:22px; border-color:b9b9b9" />
                    </div>    
                 </div>
           
          <div id="password_field">
                    <div id="usernamepic">
                        <img src="images/images/images/images/password_09.jpg"/>
                    </div>
                    <div id="inputfield">
                        <input type="text" style="width:227px; height:22px; border-color:b9b9b9" />
                    </div>    
                 </div>
              </form>
               
               </div>

CSS code


#formpanel{
    width:341px;
    height:135px;
    margin-left:auto;
    margin-right:auto;
    
}
#username_field{
    margin-top:0px;
    width:340px;
    
}
#usernamepic{
    float:left;
    margin-top:0px;
    margin-left:0px;
}

#inputfield{
    float:right;
    margin-top:0px;
    margin-right:0px;
    width:228px;
    height:27px;
}
#password_field{
    width:340px;
}

现在出现的问题是我想出现这样的结果
但是却出现了这样的结果

我在password中设置margin-top却不管用，这是为什么？我想在两个input中间空出24个像素。

------解决方案--------------------
用户名同密码一样的布局为什么还要两个不同层，增加无谓的样式，

<div class="login"><ul><li><h1>用户名：</h1><h2><input.......></h2></li><li><h1>密码：</h1><h2><input.......></h2></li></ul></div>

简单东西不要复杂化，html上面的足矣。