When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element.
There is a problem with IE8 and earlier, when using the position property. If a container element (in our case <div class=”container”>) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property.
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
2. Use the float property
通常与 top 和 right 边框有一定的空隙 <body> 元素的margin性质引起的，不像上例中右边完全贴合浏览器右边框。
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
跨浏览器问题：
同样地，先对 <body> 元素清除内外边距的差异。然后注意IE8及之前版本 always set the !DOCTYPE declaration when using the float property。
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
