You haven’t allowed enough room in one line for the label and the input.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Log In</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="login.css">
<style type="text/css">
html,body{margin:0;padding:0}
body {
width:600px;
margin:0 auto;
border: 1px solid #FF0000;
position:relative;
padding:5px;
}
h1 {
font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
color: #00008B;
background-color: #E3F2F7;
border: 1px inset #00008B;
width: 200px;
}
input.btn {
color: #00008B;
background-color: #ADD8E6;
border: 1px outset #00008B;
margin-left:38%;
}
form div {
clear: left;
margin: 0;
padding: 0;
padding-top: 0.6em;
width: 55%;
margin: 0 auto;
}
form div label {
float: left;
width: 35%;
font: bold 0.9em Arial, Helvetica, sans-serif;
text-align:right;
padding:1% 2% 0 0;
}
</style>
</head>
<body>
<h1>Log In</h1>
<form method="post" action="landingpage.php">
<div>
<label for="email">E-mail:</label>
<input type="text" name="email" class="txt" id="email" />
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" class="txt" id="password" />
</div>
<div>
<input type="submit" name="btnSubmit" value="Login" class="btn" id="btnSubmit" />
</div>
</form>
</body>
</html>
You have a fixed width and yet you have used percentages and also pixel widths so how do you know it will fit unless you first convert it to pixels.
In most cases when you have a pixel width container you should use pixel widths for the inner containers (unless you want to dynamically change the parent and have the children automatically adjust which percentage would allow).
What is the difference between a class and an id and why should you use one over the other?
This has been asked hundreds of times on the forums so a quick search will yield you lots of information but in short:
An id is unique and applies to one unique element per page. You cannot use the same ID more than once on a page.
Classes are ubiquitous and you can use them as many times as you like.
IDs carry more weight than classes (see specificity in the sitepoint reference) and will win out.
Usually ids are used when you want to identify main structural elements that are unique to the page such as header,footer,main, sidebar etc.
Classes are used for everything else (e.g. .warning{color:red}}
You would also use IDs when you have some javascript that needs to find a certain element as it is easier to find it by ID than running through all the classes to see if it’s the right one.
In truth and if you didn’t use js you could just use classes but its generally accepted that main structural elements should be ids and all the rest are classes.