why is my css staggered?

Here is my html:

<div id="header">
 <p id="logout"><a href="register.php">register</a></p>

 <h1>header.</h1>  
</div>

<div id="main">    
 <p>login.</p>

 <form method="post" action="index.php" name="loginform" id="loginform">  
    &开发者_开发技巧lt;fieldset>
        <label for="username">u:</label><input type="text" name="username" id="username" />  
        <br>
        <label for="password">p:</label><input type="password" name="password" id="password" />
        <br> 
        <input type="submit" name="login" id="login" value="Login" />
    </fieldset>
 </form>  
</div>

And here is my CSS:

* {  
    margin: 0;  
    padding: 0;  
}  
body {  
    /*font-family: Trebuchet MS;*/
    font-family: Helvetica;  
}  
a {  
    color: #000;  
}  
a:hover, a:active, a:visited {  
    text-decoration: none;  
}  

#logout { font-size: 12px;}

#header {  
    width: 700px;  
    margin: 0 auto;  
    margin-top: 0px;
    font-size: 25px;  
    padding: 10px; 

    border-bottom: 1px solid #CCC; 
    border-right: 1px solid #CCC; 
    border-left: 1px solid #CCC; 

    background-color: #EEE;  
}

#slogan { font-size:20px;}

#main {  
    width: 700px;  
    margin: 0 auto;  
    margin-top: 20px;  
    padding: 10px;  
    border: 1px solid #CCC;  
    background-color: #EEE;  
}

#contact {  
    width: 700px;  
    margin: 0 auto;  
    margin-top: 20px;  
    padding: 10px;  
    border: 1px solid #CCC;  
    background-color: #EEE;  
}

p { font-size: 20px; }

form fieldset { border: 0; }  

form fieldset p br { clear: left; }

label {  
    margin-top: 5px;
    font-size: 20px;  
    display: block;  
    width: 30px;  
    padding: 0;  
    float: left;  
}  
input {  
    font-family: Trebuchet MS;  
    border: 1px solid #CCC;  
    margin-bottom: 5px;  
    background-color: #FFF;  
    padding: 2px;  
}  
input:hover {  
    border: 1px solid #222;  
    background-color: #EEE;  
}

I can't figure out why my forms are coming out like this: http://cl.ly/2c1b0w3h3S142Q2s3A3I

Instead of lined up nicely on the left.

---

Your second label is catching on the corner of your first, since the label is taller than the text box.

Two solutions here...you can either make sure the label and box are the same height, or add a clear: left to your labels.

---

It's those float: lefts; you'll notice each label comes to the right of the previous ones. If you need the floats -- and I'm not sure you do -- then you need to use "clear".

---

Wrap your each of label and input pairs in a div and eliminate the brs.