How to right align this <div> box?

HTML & CSS
1

I want box3 to be right aligned and 10px down from top. How to achieve this ?

I tried adding margin-top:10px ; margin-right:10px to box3 CSS but it did not work.

why it did not work ? how do I make it working ? whats the minimum change I need ?


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.borderTable {	
padding: 2px 4px 2px 4px;
border: 1px solid #660000;
}

table.inlineTable{
display:inline;
}

.fieldwidth{
    width:150px;
	margin:0;
	padding:0;
	border:2px solid red;
}
.divcol {
 width: 200px;
 margin-left:10px;
 border:2px solid green;
 
}

.divuser {
 margin-left:10px;
 border:2px solid pink;
 
}

.divpass {
margin-left:10px;
border:2px solid yellow;
 
}

.box3 {
 width: 500px;
 border:2px solid #0000ff;
 display:inline
 
 }

 .spansignup {
 margin-left:10px;
}

.container{
border:2px solid #0000ff;

}





</style>
</head>

<body>
<form>
  <table width="100%" height="130"  class="borderTable" >
    <tr>
      <td width="103">&nbsp;</td>
      <td width="147">&nbsp;</td>
      <td width="94">&nbsp;</td>
      <td width="113">&nbsp;</td>
      <td width="128">&nbsp;</td>
      <td width="142">&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>About us </td>
      <td>Feedback</td>
      <td>Blog</td>
      <td>Subscriptions</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  
  <table width="30%" height="25" border="0"  >
    <tr>
      <td width="29">&nbsp;</td>
      <td width="245">Search
        <label>
        <input type="text" name="textfield">
      </label></td>
      <td width="177"><label>
        <input type="button" name="button" value="Go">
      </label></td>
    </tr>
  </table>
  <div class="container">
  
   <div>
  <fieldset class="fieldwidth">
      <legend>Sign in</legend>
      
        <div class="divuser">
          <label>
              <span>User Name</span>
              <input type="text" name="textfield2">
          </label>
        </div>

        <div class="divpass">
          <label>
            <span>Password</span>
            <input type="text" name="textfield3">
          </label>
        </div>
        
        <div class="divcol">
          <span>Login</span>
          <span class="spansignup">Sign Up</span>
        </div>
       
    </fieldset>
  
  
   <div class="box3">
     box3    
   </div>
  
  
  
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div>
</form>
</body>
</html>
2 
.fieldwidth{
[COLOR="Blue"]float:left;[/COLOR]
width:150px;
margin:0;
padding:0;
border:2px solid red;
}
.box3 {
 width: 500px;
 border:2px solid #0000ff;
 [COLOR="Blue"]float:right;
 margin-top:10px;[/COLOR]
}
3

Yes . That works …thanks.
I did not understand your code through. Please see my comment in red above

4

In the case you want a right margin as well for box3 change in the css from dogFang the margin to:


 margin: 10px 10px 0 0;
5

Floating both elements keeps them on the same line within the containing element
http://www.w3.org/TR/CSS2/visuren.html#floats