How to set fixed position of elements in browser?

Hi there, Im basically new in web development and Im trying to design a simple login menu. the problem is when I resize my Chrome window the input textboxes does not adjust and is left out. How could I make them adjust based on the size and resolution of my browser? here is my code

/* custom font*/
@font-face {
font-family: myfont;
src: url('Neov2b.ttf')
}
body{
		min-width: 800px;
		margin-left: 5%;
		width: 90%;
		height:100%;
		/*background-image:url('images/social_networking.jpg');*/
		background-size: 100% 100%;
		background-position: 100% 100%;
		opacity:.0.6;
	}

#mainLogo {
	width: 100%;
	position:relative;
	text-align:left;
	background-color: #00004e;
	font-size: 2.5em;
	color: white;
	font-style:normal;
	font-family: myfont;
	margin-top:-10px;
	margin-left: -10px;
	margin-right: -10px;
	padding:15px;
			}
.version {
font-size: 20px;

		}
		
input.username{
	position:absolute;
	margin-left:505px;
	margin-right: auto;
	top: 25px;
	}
label.label1{
	position:absolute;
	margin-left: 400px;
	top: 30px;
	color: white;
	font-family: myfont;
	}
label.label2{
	position:absolute;
	margin-left: 690px;
	color: white;
	top:30px;
	font-family: myfont;
}
input.password{
	position:absolute;
	margin-left: 795px;
	top:25px;
	}
input.submit{
	width: 100px;
	position:absolute;
	margin-left: 960px;
	top: 25px;
	}
#footer{
	position:relative;
	text-align:left;
	background-color: #00004e;
	font-size: 5px;
	color: white;
	font-style:normal;
	font-family: myfont;
	margin-top: 750px;
	margin-left: -10px;
	margin-right: -10px;
	padding:15px;
	
}

<html>
<head></head>
<link rel="stylesheet" type="text/css" href="style1.css" media="screen />
<body >
<div id ="header" > </div>
<p id="mainLogo">
mlms&nbsp;<span class ="version">v1.1</span> 
</p>
<div id = "loginForm"> 
<form action="" method="post">
<label class="label1" >Username:</label> <input type="text" name="username" size= "20" class="username">
<label class="label2"> Password:</label> <input type="password" name="password" size="20" class="password">
<input type="submit" value="Enter" class="submit">
</form>
</div>

<div id = "registration"> </div>
<div id= "footer">
random system
</div>
</body>
<html>

Hope the hear some suggestions soon. Thanks

herms14

Light Poster

47 posts since Mar 2008

Reputation Points: 10

Solved Threads: 0

7 Months Ago

Truthfully, seldom of the web developer will set the minimum width to the body. They just simply set a fix width to it so that its width is static on any resolution's screen and the content is aligned properly.

lps

Junior Poster

117 posts since Jul 2011

Reputation Points: 13

Solved Threads: 22

7 Months Ago

Making a page resolution-dependent is considered a bad practice indeed, i would personally use position:absolute on everything, and simply make sure it runs well on every acceptable resolution.

I have a Firefox plugin (the web developer toolbar) that allows me to automatically resize the browser as if it was on a different resolution.

But if you really want to resize you page with your browser, try using position: fixed;

Oh, and i know desinging a resolution-independent page might seem rather hard at the begin.
Just keep trying it until you get the hang of it :)

phoenix_2000

Junior Poster

107 posts since Sep 2011

Reputation Points: 40

Solved Threads: 12

7 Months Ago

I agree I would use position:absolute as well. Another good Firefox plugin that would help you is Firebug.

Keep on trying, it will get easier.
Good Luck,
Sarah

webdesign22