2 Part Question z index Positioning DIV CSS Question

Hello!

z-index: Part 1

I have a "containerBottom" DIV which contains a img that has a height of 49px, now I've set the margin height at -40 so the area will position under the "content" DIV.

Now I am able to get the effect I am looking for (having the "union made" img part to the right appear equal with the bottom of the actual "content" div), but now any content/links I place in the "content" div is not clickalbe (test link)..?

I thought changing the z-index for the "containerBottom" to a (-) value would allow the "content" div to be ok (ontop - have the links on it clickable), but no luck!

Links to view the full files:

CSS: http://www.jamiegerrard.com/carpente...css/common.css
HTML: http://www.jamiegerrard.com/carpentersUnion/about_us/

CSS

Code:

#container {width:701px; margin:0 auto; padding:0; background:url(../images/common/bgContainer.gif) repeat-y;}
#containerTop {width:701px; height:6px; background:url(../images/common/bgTop.gif) no-repeat left top; overflow:hidden;}
#containerBottom {z-index:-1; width:701px; height:49px; margin:-40px 0 0 0; background:url(../images/common/bgBottom.gif) no-repeat left top; overflow:hidden;}

#content {width:556px; min-height:375px;}
* html #content {height:375px;}
#header {width:556px; height:84px; float:left;}

HTML

Code:

<div id="header"><a href="../"><img src="../_assets/images/common/cuLogo.gif" alt="NS & PEI Regional Council of Carpenters, Millwrights & Allied Workers" width="93" height="84" border="0" /></a><a href="../"><img id="top" src="../_assets/images/common/cuWatermark.gif" alt="NS & PEI Regional Council of Carpenters, Millwrights & Allied Workers" width="370" height="84" border="0" /></a><a href="../become_a_union_member" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('union','','../_assets/images/common/linkBecomeUnionMember02.gif',1)"><img src="../_assets/images/common/linkBecomeUnionMember01.gif" alt="Become A Union Member" name="union" width="93" height="84" border="0" id="union" /></a></div>
	<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

		<p><a href="#">test link</a></p>
	</div>
	
	<div id="containerBottom"></div>
</div>

DIV Positioning Part 2 - Clear..Display Block?

With the "containerBottom" DIV again. It seems any element I position about is causes the "containerBottom" DIV to not clear.

I know this is a problem with the "contact" DIV. but am not sure how to fix.

HTML Page: http://www.jamiegerrard.com/carpentersUnion/
CSS: http://www.jamiegerrard.com/carpente...css/common.css

Now I thougth I would have to "clear" the "contact div" to allow the "containerBottom div" to retain its place.. but no luck. If this part as been previously addressed (have did not find one in my search), please just post the link, THANKS!

Thanks ifor your help, Jamie