Don't use position:relative to move things around because it's not really meant for structural elements. In most sites you would hardly ever need to move things with relative positioning. A relatively placed element is only moved visually but not physically which means that the space it originally occupied is always preserved. It's as if it was never moved except that it looks as though its somewhere else.

Instead use margins or use floats when you want things horizontal.

You can make your form line up by floating it and not having to exactly place any elements at all.

This is just rough but I've restyled the header to show what I mean and I don't think you need an image for the submit either.

It's looking pretty consistent across IE8, Opera and Chrome, not sure what you are seeing that is different. Form controls do vary from one browser to another in their default presentation, as do many other elements. The key to successful web design is to know when it doesn't matter that it looks fractionally different in one browser to another!

Okay, the boxes dont really change, it's more of the log in button. It's different sizes in different browsers.

OK, so it's different sizes. Does that really matter?

The general advice with form controls is to let browsers use their natural style as much as possible. If you want the submit button to be exactly the same in every browser, you'll need to do it as an image.

There's always more than one way to do something but if you can do it with less elements then that's all the better. Only add elements when you really need them or if it makes sense to use them for structure.

You had the gradient on the header which you had at 100% width and then you had an inner header set to 1000px width. I merely removed the header element and put the image on the body to save an element.

Your wrapper was set to 100% but had no images applied and was therefore a wasted element so instead I used it to hold the layout together instead of having to do margin:auto for every element. If you need the footer full width it can sit outside the wrapper.

Of course you may have extra other requirements so you can still change things around to suit.

Try to look at a page logically and divide it into sections as most pages do have defined areas rather than trying to place every single little thing individually.

So from looking at my CSS you have come to concluded that I can do everything using floats?

Well not exactly everything but when you need horizontal alignment of separate blocks then yes floats are a good tool. They are not without their bugs of course and there is a lot to know about them but they are one of the most powerful tools in css.

Some say that floats have been abused too much but this is not really true. They were designed to float blocks of content next to each other as well as letting content wrap around images etc. Use them wisely but don't avoid them.

So when should I ever use relative positioning? I'm sure there are articles about to use this too.

You would use relative positioning to move something when you want it to be somewhere else but at the same time don't want to disrupt the flow of the document in anyway.

It's usually used for subtle overlapping effects where you want everything else to stay as it was. On the other hand when you move an element with margins then everything else (non-positioned) gets out of the way and you get no overlap. Usually this is what you want because you have to do nothing to maintain the layout and you can add content, resize text and everything behaves. The most important thing is allowing a page to flow and for content to follow content easily and without having to do anything special.

If you move an element with relative positioning by say top:200px then the next element in the page will not start after the relative elements new position but after the relative elements original position. That in all likelihood means that thing will overlap.

When moving something with relative positioning its like tearing it out of the page and then glueing it somewhere else. You leave a great big hole in the page where you ripped it out.

Relative position is often added to elements but without co-ordinates in order to creat a stacking context for absolutely placed children and also so that z-index can take effect. As no co-ordinates have been used there is no impact on the layouot.

The general advice with form controls is to let browsers use their natural style as much as possible. If you want the submit button to be exactly the same in every browser, you'll need to do it as an image.

The formatting of a form button can be done without an image, just by using css. That's the way I do it myself, the only form control that I'm not able to do that with on is a "browse for file" form field, AFAIK that's just down to the css spec.