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

And in my html editor l开发者_开发问答ooks just fine: alt text http://img441.imageshack.us/img441/7348/bien.png

But when i see it on the browser (Chrome & Firefox) looks like this: alt text http://img59.imageshack.us/img59/642/malhh.png

Im very new to layout with tag, any idea of what im making worng?

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.

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.

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.