Where to begin? There's at least half a dozen problems with this:
1. You have a missing <head> section
2. The CSS should be placed in the <head> section
3. You have a misplaced quote in the 'input' tag
4. The first row of buttons has the 'id' set to 'button' instead of the class.
5. There is a missing </div> tag from the last row of buttons
6. You have a <br /> tag nested within an ol element
And I could go on...
Solution:
<html>
<head>
<title></title>
<style type="text/css">
li.nostyle
{
list-style-type: none;
}
.border
{
width:200px;
height:250px;
border:1px solid grey;
}
.left
{
left: 10px;
width: 30px;
}
.button
{
width:200px;
float:left;
}
.otherButton
{
width:15px;
}
</style>
</head>
<body>
<div class="border">
<ol>
<li class="nostyle">
<div class="button">
<input type="text" name="input" style="width:120px;" class="left" />
</div>
</li>
<li class="nostyle">
<div class="button">
<input type="button" value="1" class="left" />
<input type="button" value="2" class="otherButton"/>
<input type="button" value="3" class="otherButton"/>
<input type="button" value="+" class="otherButton"/>
</div>
</li>
<li class="nostyle">
<div class="button">
<input type="button" value="4" class="left" />
<input type="button" value="5" class="otherButton"/>
<input type="button" value="6" class="otherButton"/>
<input type="button" value="-" class="otherButton"/>
</div>
</li>
<li class="nostyle">
<div class="button">
<input type="button" value="7" class="left" />
<input type="button" value="8" class="otherButton"/>
<input type="button" value="9" class="otherButton"/>
<input type="button" value="*" class="otherButton"/>
</div>
</li>
<li class="nostyle">
<div class="button">
<input type="button" value="0" class="left" />
<input type="button" value="%" class="otherButton"/>
<input type="button" value="=" class="otherButton"/>
<input type="button" value="/" class="otherButton"/>
</div>
</li>
</ol>
</div>
</body>
</html>