Use
position: relative; text-align:right; /* for the container, */
position: absolute; left: 0; /* for the left aligned element, */
display: inline; /* or */
display: inline-block /* for the right element. */
to emulate floating and create bookends for a masthead without encountering the side effects of floats
Use absolutely positioned divs nested in a relatively positioned wrapper to create equal height columns using the following steps:
- Create the columns using floats or inline-block
- Create a wrapper div around all the columns and set it to be relatively positioned
- Place an absolutely positioned div as the last element inside the wrapper div
- Set the absolutely positioned div to { bottom:0; height: 100%; z-index: -1; }
- Set the height to a fixed number large enough to fill the columns for IE6
- Set the width of the absolutely positioned div equal to the width of the first column
- Set the left offset of the absolutely positioned div so that it overlaps the first column
- Set the desired border and background color of the absolutely positioned div
- Repeat this step for the remaining columns if necessary
- Set { position:relative; z-index:2; }, add vertical padding(or replace margins with padding) and reset the background on any containers above or below the columns to hide the overflow in IE6
- Set { top:1px; margin-top: -1px; } to vertically align the absolutely positioned div in IE6
- Set clip:rect(0 ## 9999px 0); where ## is the width of the column to truncate horizontal overflow in IE6
- If z-index:2 fails in IE6, make it higher than the z-index of the wrapper div if they are in the same parent
- If z-index:2 still fails in IE6, make it higher than the z-index of the wrapper div's parent
Use nested spans to created irregularly shaped anchors without image maps with the following steps: - Use the same setup as above to nest spans within anchors
- Set the anchors and the spans to be absolutely positioned
- Set the ul to be relatively positioned
- Set a single background image for both the anchors and spans
- Reposition the anchors and spans so that the bounding boxes for the anchors do not overlap
- Change the background position of the anchors and spans on :hover to match the rollover state
Manage research, learning and skills at defaultLogic. Create an account using LinkedIn or facebook to manage and organize your Digital Marketing and Technology knowledge. defaultLogic works like a shopping cart for information -- helping you to save, discuss and share.
Visit defaultLogic's partner sites below: