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