I am design a site where it looks better full width so want it full width on all screen widths but when viewing in firefox and you minimize the windows the login box moves.

* {
padding: 0px;
margin: 0px;
}

html, body, #wrapper {height: 100%;}

body > #wrapper {height: auto; min-height: 100%; width: 100%; margin: 0 auto;}

#header {
	background-image:url(images/header-1.jpg);
	background-repeat:repeat-x;
	height:146px;
}

#logo {
	background-image:url(images/logo.jpg);
	background-repeat:no-repeat;
	height:146px;
	width:200px;
	float:left;
	margin-left:50px;	
}

#login {
	background-image:url(images/header-3.jpg);
	background-repeat:no-repeat;
	height:146px;
	width:407px;
	float:right;
	margin-right:50px;
}

#menu {
	background-image:url(images/menu-1.jpg);
	background-repeat:repeat-x;
	height:69px;
}

#mid {
	background-image:url(images/mid-1.jpg);
	background-repeat:repeat-x;
	height:438px;
}

Think to design http://www.scottishreefer.co.uk/other/design3.htm

Of course the login box is going to move, you've got it floated with a 50px right margin (which IE6 will DOUBLE by the way). So, the login box is floating just like you told it to when the browser window is resized. If it didn't move, it might move OFF the screen and force people to scroll horizontally to get to it.

So what is the best way to do it to get it the way i want it.

And... exactly what is the way you want it ???
If you make the window smaller, but keep everything fixed, you're going to wind up hiding some things. If you want everything to be visible at different screen sizes, you need a liquid layout.

What my aim is to keep the design full screen so in 800 x 600 it will be full screen and if someone has a bigger screen it will still be full screen.

Or do yo think i should just design it for one screen size if so what size?

In order to accomplish what you want, you need a liquid layout. That means defining widths in percentages, among other things.
http://www.maxdesign.com.au/presentation/liquid/
http://www.cssliquid.com/