div structure helper

[eluser]Lone[/eluser]
Heres my chop chop

Code:

<div id="loginBox">
&lt;form action="http://domain.com/login" method="post"&gt;
  <h2>Enter your Username &amp; Password to continue &nbsp;</h2>
  <table>
    <tr>
      <td><label for="field_username">Username:</label></td>
      <td>&lt;input type="text" name="username" id="field_username" class="textbox" /&gt;</td>
    </tr>
    <tr>
      <td><label for="field_password">Password:</label></td>
      <td>&lt;input type="password" name="password" id="field_password" class="textbox" /&gt;</td>
    </tr>
  </table>
  <p>&lt;input type="submit" name="login" value=" login " id="loginBox_submit" /&gt;</p>
&lt;/form&gt;
</div>&lt;!--loginBox--&gt;

CSS

Code:

#loginBox {
    width: 600px;
    margin: 10px auto;
    background: #ebc47e;
    border: 2px solid #d98240;
}

#loginBox form {
    padding: 10px 20px 10px 180px;
    background: url(http://www.stelex.com/images/maingraphics/login_icon.gif) no-repeat 0 50%;
}

#loginBox h2 {
    font-size: 1.3em;
    letter-spacing: -1px;

}

#loginBox table {
    border-collapse: collapse;
}

#loginBox table tr td {
    display: table-cell;
    padding: 2px 4px;
}

#loginBox label {
    font-weight: bold;
}

#loginBox .textbox {
    border: 1px solid #d98240;
    background: #f9e5c2;
    padding: 2px 3px;
}

#loginBox_submit {
    border: 1px solid #942724;
    background: #d98240;
}

A few oddities you may notice:

<!--loginBox--> - I always comment the end of a lot of my id'd div's etc., makes it easier to come back to or finding errors

DIV around form - I use to get get around the padding/width box issue ie has as standard (use an inner element - in this case the form)

Random background image - Google image search wooooo