| 2006/07/07 09:19:35 PDT by aqhong Edited at 2006/07/07 11:49:51 PDT |
When using absolute or relative positioning, you must specify at least one offset (top, right, bottom, or left) if you want the element to move. The offset is the distance between the element and that side. For example, setting the offset to "left: 50px" would shift the element 50px from the left; in other words, the element itself would move to the right. You can also use negative offset values as well.
Relative positioning
Relative positioning moves an element from its original position, without affecting any other elements. The space where the element used to be remains intact; other content does not move in to fill the space.
The following code will push an element 100px from the top (100px downward) and 50px to the left (since the value is negative). Nothing else on the page will be affected.
#element-id {
position: relative;
top: 100px;
left: -50px;
}
Absolute positioning
Absolute positioning takes an element out of its original position, and drops it somewhere else on the page, "above" the rest of the content. The space where the element used to be is filled with the content that came after, as if the element was never there.
Absolute positioning positions an element in respect to either a positioned container element (if there is one), or the browser window (if there is none).
The following code will place an element 100px from the top and 50px from the left of the browser window. If the element is inside another positioned element (either absolute or relative), it will be 100px from the top and 50px from the left of that containing element, and not the browser window.
#element-id {
position: absolute;
top: 100px;
left: 50px;
}
Floats
A floated element is one that is pushed to the far left or right of the window or any containing element. It is somewhat similar to absolute positioning in that block elements that follow it will act as if the element was never there (by moving up into the space it previously occupied), but inline elements (such as text and images) will wrap around the floated element, instead of being covered up by it. Content that comes before the floated element will be unaffected.
When floating an element, you must specify a width for the element. You can float an element either left or right.
The following code will float an element to the left and set its width to 200px.
#element-id {
float: left; /* or "right" */
width: 200px;
}
If you don't want an element that follows the floated element to wrap around it, you can "clear" the element. Clearing an element prevents any floated elements from appearing at the side of the element. The element will appear directly below the bottom edge of the floated element instead. You can clear either, or both, sides of an element.
The following code tells the browser to prevent any elements floated to the left from appearing the left of the element.
#element-id {
clear: left; /* or "right" or "both" */
}
Two-Column Layout
A multi-column layout can be achieved using a combination of floats and margins.
The following code produces a simple two-column layout. The left column has a fixed width (200px), while the right column expands to fill the rest of the window. The left margin of the right column is set equal to the width of the left column in prevent the text in the right column from appearing below the left column. Also note that #leftcolumn (which is the floated element) must appear first in the code, before #rightcolumn.
#leftcolumn {
float: left;
width: 200px;
}
#rightcolumn {
margin-left: 200px;
}