Hi I've got a 3-column page with footer:
#header { position: relative; background-color: #33ccff; background-image: url(crest_banner1.jpg); background-repeat: no-repeat; height: 100px; border-bottom: 1px solid #fff; z-index: 190; } #header_text { font-size: 400%; margin-left: 80px; } #more { font-size: 90%; } #leftcol { clear: both; float: left; width: 30%; margin-left: 0px; margin-top: 0px; margin-right: 10px; background-color: #fff; background-image: url(background.jpg); background-repeat: no-repeat; padding: 2em 10px 20px 10px; border-right: 1px solid #0a57a4; } #rightcol { position: absolute; left: 68%; top: 130px; width: 30%; padding-left: 10px; padding-right: -10px; margin-top: -2px; margin-left: 10px; z-index: 3; padding: 2em 10px 10px 10px; background-color: #fff; background-image: url(background.jpg); background-repeat: no-repeat; border-left: 1px solid #0a57a4; } #leftmenu { font-size: 80%; } #content { margin: 0px 32% 0px 32%; padding: 10px 10px 10px 10px; color: #000; background-color: #fff; z-index: 100; } #hnav { position: relative; background-color: #ffa615; background-image: url(bluebox.gif); background-repeat: repeat-y; color: #fff; height:1.6em; border-bottom: 1px solid #fff; z-index: 200; } #footer { z-index: 4; clear: both; width: 100%; margin: -1px 0 0 0; text-align: center; font-family: Verdana; font-size: 11px; padding: 3px; border-top: 1px solid #333; border-bottom: 1px solid #333; color: #fff; background-color: #0a57a4; background-image: url(bar.jpg); background-repeat: no-repeat; } which works ok, excepting that the rightcol sometimes goes over the top of the footer (ie when text is resized larger), despite having a lower z-index. Any thoughts why this is happening and how to fix it? TIA > Robin Gallagher > ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************