css - play form-helper not displaying inline -

i'm new play framework , trying add form top of page simple username , password field , submit button. i'm using play form helper, won't allow me have these fields side side ,instead puts them on top of 1 another. keep trying change css, no luck.

here's relevant part of html

    <header id="top_header" class=rounded>         <div id="logo">             <h1>@message</h1>         </div>         <div id="login_pane">             <div id="login">             @helper.form(action=routes.test.testfunction(), 'id->"login_form"){                 @helper.inputtext(loginform("username"), 'id->"username", '_label->"username")                 @helper.inputpassword(loginform("password"), 'id->"password", '_label->"password")                 <input type="submit" value = "enter" id="login_button">             }             </div>         </div>     </header> 

and css

#top_header{     background: yellow;     height: 30px; }  #logo{     float: left;     background: green;     width: 200px; }  #login_pane{     float: right;     background: blue;     width: 500px; }  #login{     float: left;     background: red; }  #username, #password, #login_button{     display: inline; } 

by way, use ugly background colours see things positioned. i've tried putting display: inline everywhere it's having no effect. has ideas on how position form elements side side?

if check html source can notice form-helper generating html (maybe similar not identical) :

<form action="/test/testfunction" method="get" id="login_form">     <dl class=" " id="username_field">         <dt><label for="username">username</label></dt>         <dd>             <input type="text" id="username" name="username" value="" >         </dd>     </dl>     <dl class=" " id="password_field">         <dt><label for="password">password</label></dt>         <dd>             <input type="password" id="password" name="password" >         </dd>     </dl>     <input type="submit" value = "enter" id="login_button"> </form> 

so, can define css based on dl, dd, or dt element make displayed side side. simple not best sample (i tell basic) :

#login_form dl {    padding: 10px;    float: left; } #login_form dd {    margin-left: 0px; } 

hope useful friend.. :)