<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" subLang="en-US"
xml:subLang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CheckBox height width float margin</title>
<style rel="stylesheet" type="text/css">
#sidebar {
width: 250px;
float: left;
background-color: pink;
}
#block {
width: 240px;
float: left;
background-image: url(images/background-image.gif);
background-position: bottom left;
background-repeat: no-repeat;
background-color: #1f8963;
padding: 12px 0 8px 0;
}
#login img {
float: left;
}
.input {
width: 180px;
height: 20px;
border: 2px inset #DfDf67;
float: left;
margin: 0 0 6px 0;
padding: 0 0 0 2px;
font-family: verdana;
font-size: 13px;
color: #f4f4f4
}
.button {
background-image: url(images/button.jpg);
background-position: top left;
background-repeat: no-repeat;
background-color: gray;
width: 150px;
border: 0px;
margin: 8px 0 4px 8px;
padding: 3px 0 5px 0;
cursor: hand;
cursor: pointer;
color: #f4f499;
font-family: arial;
font-size: 12px;
}
.checkbox {
float: left;
margin: 0 0 0 17px;
width: 15px;
height: 15px;
}
</style>
</head>
<body>
<div id="sidebar">
<div id="block">
<div id="login">
<form action="#">
<img src="images/text1.jpg" alt="" width="60" height="15" />
<input type="text" class="input" />
<img src="images/text2.jpg" alt="" width="60" height="15" />
<input type="text" class="input" /><br />
<input type="button" class="button" value="Enter" /><br />
<input type="checkbox" class="checkbox" /><img src="images/text3.jpg" alt="" width="80" height="16" /><br />
</form>
<a href="http://www.happycodings.com" class="forgot">forgot password?</a>
</div>
</div>
</body>
</html>