html - Aligning Text Directly Under Text Input -

this html , css:

html:

<div id="navrow">     <img style="float: left;" src="questerslogoresized.png" />     <ul>         <li>register</li>&nbsp&nbsp&nbsp         <li>about</li>&nbsp&nbsp&nbsp         <li>reviews</li>&nbsp&nbsp&nbsp         <form id='login' action='<?php echo $fgmembersite->getselfscript(); ?>' method='post'>             <div style="position: absolute; right: 120px;">                 <input type='hidden' name='submitted' id='submitted' value='1' />                 <label for="username">your username goes here</label>                 <input type='text' name='username' class="formlogin" placeholder='username' id='username' value='<?php echo $fgmembersite->safedisplay(' username ') ?>' maxlength="20" />                 <span id='login_username_errorloc' class='error'></span>                 <input type='password' class="formlogin" placeholder="password" name='password' id='password' maxlength="50" />                 <span id='login_password_errorloc' class='error'></span>             </div>             <input type='submit' style='position: absolute; top: 18px; right: 45px;' name='submit' value='submit' />             <!--<div class='short_explanation'><a href='reset-pwd-req.php'>forgot password?</a></div>-->         </form>     </ul> </div> 

css:

#navrow {     background: #ffc966;     width: 100%;     padding-top: 5px;     padding-bottom: 5px;     padding-left: 75px;     box-shadow: 0px 0px 15px 0px #000; } .formlogin {     border-radius: 12px 12px 12px 12px;     height: 24px;     /*width: 200px;*/     padding: 5px;     border-style: solid;     border-color: #0093cc;     -webkit-transition: border-color 1s ease;     -moz-transition: border-color 1s ease;     -o-transition: border-color 1s ease;     -ms-transition: border-color 1s ease;     transition: border-color 1s ease;     display: inline-block;     font-size: 16px;     width: 12.5em;     position: relative;     top: -2em; } 

i'm wondering how can label username (your username goes here) located directly underneath username input field.

help appreciated. again stack overflow!

i think mean this demo.

the idea wrap input , label div, div.form-controls in example. then, set input , label block elements , label should come beneath input.

i have removed position values couple of elements. tweak per needs.

#navrow {    background: #ffc966;    width: 100%;    padding-top: 5px;    padding-bottom: 5px;    padding-left: 75px;    box-shadow: 0px 0px 15px 0px #000;  }  .formlogin {    border-radius: 12px 12px 12px 12px;    height: 24px;    /*width: 200px;*/    padding: 5px;    border-style: solid;    border-color: #0093cc;    -webkit-transition: border-color 1s ease;    -moz-transition: border-color 1s ease;    -o-transition: border-color 1s ease;    -ms-transition: border-color 1s ease;    transition: border-color 1s ease;    display: block;    font-size: 16px;    width: 12.5em;  }  .form-controls {    float: left;  }

<div id="navrow">    <img style="float: left;" src="questerslogoresized.png" />    <ul>      <li>register</li>&nbsp&nbsp&nbsp      <li>about</li>&nbsp&nbsp&nbsp      <li>reviews</li>&nbsp&nbsp&nbsp      <form id='login' action='<?php echo $fgmembersite->getselfscript(); ?>' method='post'>        <div>          <div class="form-controls">            <input type='hidden' name='submitted' id='submitted' value='1' />            <input type='text' name='username' class="formlogin" placeholder='username' id='username' value='' maxlength="20" />            <label for="username">your username goes here</label> <span id='login_username_errorloc' class='error'></span>            </div>          <div class="form-controls">            <input type='password' class="formlogin" placeholder="password" name='password' id='password' maxlength="50" />            <span id='login_password_errorloc' class='error'></span>            </div>          <p style="clear:both"></p>        </div>        <input type='submit' style='position: absolute; top: 18px; right: 45px;' name='submit' value='submit' />        <!--<div class='short_explanation'><a href='reset-pwd-req.php'>forgot password?</a></div>--></div>  </form>  </ul>

alert! practices -

• don't use   space issues. there's css that.
• shorthands! border-radius: 12px 12px 12px 12px; border-radius : 12px;
• don't use inline styles. again, there css that.