Cascading Style Sheets/CSS Menus

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