Center Aligning Using the margin Property
-----------------------------------------
Block elements can be center-aligned by setting the left and right margins to "auto".
Note Note: Using margin:auto; will not work in IE8 and earlier, unless a !DOCTYPE is declared.
Setting the left and right margins to auto specifies that they should split the available margin equally.
The result is a centered element.
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Left and Right Aligning Using the position Property
---------------------------------------------------
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
.container
{
position:relative;
width:100%;
}
predefine margin and padding for the element
---------------------------------------------------
When aligning elements like this, it is always a good idea to predefine margin and padding for the element.
This is to avoid visual differences in different browsers.
There is a problem with IE8 and earlier, when using the position property. If a container element (in our case
)
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%;
}
Left and Right Aligning Using the float Property
------------------------------------------------
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
When aligning elements like this, it is always a good idea to predefine margin and padding for the element.
This is to avoid visual differences in different browsers.
There is a problem with IE8 and earlier when using the float property. If 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 float property.
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}