Html layout with <DIV> work on html editor but not on brownser

Question

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?

Answer 1

What's wrong? You're relying on the rendering engine of your HTML editor and you shouldn't.

Only use a recent version of Firefox, Safari, Chrome or Opera for testing (edit: I forgot IE8 and I shouldn't have; it's support of CSS2.1 is good. It just lacks dozens of extensions but that's another story), then the other browsers including IE and forget your not-so-awesome rendering tool.

Answer 2

I believe your specific issue is being caused by the lack of trailing semicolons at the end of your style properties. That will often cause bad rendering.

 margin-top: 1px" >

should be

 margin-top: 1px;" >

Also, you should definitely take the advice of @Christian Mann and put the CSS in the of your document or, even better, in an external stylesheet. Inline CSS styles should be avoided.

Answer 3

put "margin: auto;" in the style of div contenido and usuario. Then add padding-top: 58px; in div usuario (as you are trying to put that div 58px lower.)

Oh! of course remove those margin-top styles from every where and use padding style instead.