text-align:center; doesn't work

Short answer: your text isn't centered because the elements are floated, and floated elements "shrink" to the content, even if it's a block level element.

Can you explain more what this means?

I had to set all my position to relative to make the parent div change size when I add components to it with javascript

Anywhere you have float:left; in your CSS, add width: 100%; after it. Floating will kill your desired center alignment.

Also, add text-align: center; to #login

Finally figured it out. All i needed to do is to add clear:left; to my loginBttn div after that everything worked fine

thanks for trying to help everybody