My css doesn't work well in my main html page - html

Question

I want to change my main HTML page. I would like to have the login section at the right side, the paragraph in the middle and the header at the top and in the middle. I tried to change the code in the CSS but nothing.
How it is now:
How I would like to be:
My current website code:
function resetForm() {
// clearing selects
var selects = document.getElementsByTagName('select');
for (var i = 0; i < selects.length; i++)
selects[i].selectedIndex = 0;
return false;
}
window.load(resetForm());
body {
background-color: #ffffff;
margin: 0;
padding: 200px;
}
h3 {
text-align: center;
color: #ff9900;
padding-bottom: 50px;
}
div.container#login {
float: right;
clear: both;
padding: 20px 20px 20px;
width: 310px;
margin: 0 auto;
border-radius: 3px;
}
div.container #div.content_right #div.login #inputfield {
font-size: 20px !important;
border-radius: 2px;
float: right;
}
div.login#input[type="password"] {
font-size: 20px !important;
border-radius: 2px;
}
input[type="submit"] {
font-size: 18px !important;
font-family: Arial, sans-serif;
color: #ffffff;
background-color: #ff9900;
border: solid;
border-radius: 25px;
}
div.login#input[type="reset"] {
font-size: 18px !important;
font-family: Arial, sans-serif;
color: #ffffff;
background-color: #ff9900;
border: solid;
border-radius: 25px;
}
#footer {
clear: both;
margin-top: 20px;
border-top: 1px solid black;
padding: 20px 0px;
padding-bottom: 20px;
font-size: 70%;
background-color: black;
color: #ff9933;
text-align: center;
text-decoration: none;
bottom: 40px;
}
<div id="container">
<div id="header"></div>statistics</div>
<!--End of Header-->
<!--Pragraph in the center-->
<div id="p">
<p>
Some text
</p>
</div>
<!--End of Pragraph-->
<div id="content">
<div id="content_right">
<div id="login">
<h3>Login</h3>
<form action="login.php" method="POST">
<label>Username:</label>
<br/>
<input class="inputfield" type="text" name="username" size="30" />
<br />
<br/>
<label>Password:</label>
<br/>
<input class="inputfield" type="password" name="password" size="30" />
<br />
<br/>
<input type="submit" value="Login" name="submit" />
<input type="reset" name="reset" value="Clear" />
</form>
<!--End of Login-->
</div>
<!--End of content right-->
</div>
<!--End of content-->
</div>
</div>
<!--End of Container-->
<div id="footer">
footer
</div>
<!--End of Footer-->

Answer 1

You need to research the display CSS property, this will go a long way to helping you reach what you want.
see http://learnlayout.com/display.html and https://css-tricks.com/almanac/properties/d/display/
P.s
please note that the OP was edited so this no longer displays the page was set as HTML5
In HTML5, which you have, the character encoding is displayed differently:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
P.s.s
As Jamie Barker rightly pointed out, your <div id="header"> is not closed. this will cause problems later on. Just add a </div> underneath the header element.
P.s.s.s
Finally, your CSS:
div.container#login {
float: right;
clear: both;
padding: 20px 20px 20px;
width: 310px;
margin: 0 auto;
border-radius: 3px;
}
div.container #div.content_right #div.login #inputfield {
font-size: 20px !important;
border-radius: 2px;
float: right;
}
These are all referencing using the period (dot) . or the # symbol. But div.container means "the div containing the container class" but this is not so because the "container" identifier is infact an id NOT a class so you need to adjust all your CSS to reference id rather than class as so:
#this is an id identifier in CSS
.this is a class identifier in CSS
You also do not need to reference the div tag itself, so replace the quoted CSS with this:
#container#login {
float: right;
clear: both;
padding: 20px 20px 20px;
width: 310px;
margin: 0 auto;
border-radius: 3px;
}
#container #div.content_right #div.login #inputfield {
font-size: 20px !important;
border-radius: 2px;
float: right;
}

Answer 2

Is there any reason you aren't using absolute positioning over float?
Place all of your html within a container div and apply the following css:
#container {
position:relative;
left: 0;
top: 0;
margin: 0 auto;
}
All of your html elements within the div then use position: absolute and left and top attributes to position them however you want. If you need to give the container a fixed height and / or width.