Hello, i made this layout:
<div id="todo" align="center" >
<form method="post">
    <div id="cabeza" style="width:850px;height:100px">
    </div>
    <div id="contenido" style="width:420px;height:220px;background-image: url(IMG/cuadrologin.png); margin-top: 1px" >
        <div id="usuario" style="width:348px; height:35px; margin-top: 58px">
            <input name="username" type="text" style="width: 250px; height: 30px;background-color: transparent;border: 0px solid #000000;font-size:x-large;color: #222; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-weight: bold;" size="299" />
        </div>
        <div id="clave" style="width:348px; height:35px; margin-top: 22px">
            <input name="clave" type="text" style="width: 250px; height: 30px;background-color: transparent;border: 0px solid #000000;font-size:x-large;color: #222; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-weight: bold;" size="299" />
        </div>
    </div>
    </form>
</div>
And in my html editor looks just fine:
But when i see it on the browser (Chrome & Firefox) looks like this:
Im very new to layout with  tag, any idea of what im making worng?