Using a .gif & z-index to bridge two columns

Hi,
Hope I've done a fair job of creating a decent title.

http://tinyurl.com/3xfgg9

*Summary: I have a grey right floating column and a bordered left floating left-content column.

I'd like the bordered column to disappear behind the grey column instead of having the white gutter space.

I would also like to know how to continue the grey column to whatever height the content column is. Right now I "hacked" the grey bar down using several paragraph tags.

/summary*


Here is my tinyurl of what I'm on for a client: http://tinyurl.com/3xfgg9

I have a layout with a header, and 3 floats (2 left, 1 right) all contained in a wrapper div.

My issues are with my #content-right div and with my #content-left div.

1) I'd like my right grey div to stretch to the height of content-left.
Do I need to wrap both in a left float div to achieve this?

2) I would like to have the bottom border line of the left-content to dissapear behind the grey bar, instead of get cut off. Is proper procedure to make the left-content div larger and stack it behind the grey div using z-index?

Or can I create an image that joins a black line to the grey area, and align it to the bottom of a div with a high z-index?

Or clear both columns with a div with the line-to-grey image and position it top:-100?

Thank you for reading and possibly helping me out.

Go Celtics!

Here is my CSS:
/* CSS Document */

* {
background-color : #ffffff;
margin : 0;
padding : 0;
font-family:Arial, Helvetica, sans-serif;
}
.headline {
font-size : 18px;
font-weight : bold;
margin-left : 15px;
}
#div-img {
background : url(truck-img.gif) no-repeat top right;
display : block;
height : 111px;
z-index : 3;
position : relative;
}
#header-logo {
background : url(header-bgv2.gif);
height : 116px;
position : relative;
overflow : hidden;
top : -17px;
z-index : 1;
}
#header-logo .h1title {
position : absolute;
margin-left : 140px;
font-size : 32px;
left : 140px;
top : 35px;
color : #fff;
background : transparent;
}
#wrapper {
margin : 0 auto;
width : 850px;
}
#main-menu {
float : left;
width : 170px;
line-height : 3;
}
#main-menu a {
text-decoration : none;
color: #CC0033;
font-weight:bold;
}
#content-wrap {
float : left;
height : 500px;
}
#content-left {
width : 500px;
float : left;
border-left-width : 1px;
border-left-style : solid;
border-left-color : #000000;
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : #000000;
margin-bottom : 10px;
position : relative;
top : -15px;
z-index : 99;
}
#content-right {
width : 160px;
float : right;
background : #ccc;
position : relative;
top : -35px;
z-index : 10;
}
#content-right p {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
line-height : 22px;
margin-top : 10px;
margin-right : 15px;
margin-bottom : 15px;
margin-left : 15px;
background : #ccc;
}
#content-left p {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
line-height : 22px;
margin-top : 10px;
margin-right : 10px;
margin-bottom : 10px;
margin-left : 20px;

}
#footer{
clear:both;
background: #fff;
height:16px;
text-align:center;
font-size:12px;
}

31 views and nobody has any ideas?

ok, so you want the actual gray right column to be the size of the main content in the middle? Just so i understand that part, i get confused easily!!

I want the light gray to stay the same height as the main content column, and I'd like it if the black bordered content box met up to the edge of the gray column.

Right now I have the gray column as large as it is by using lots of paragraph tags. I need it to be dynamic and match height with the content.

Thanks, I recall you helped me with my last question as well!

ok, as far as getting rid of the space gap, is this what you want?

just replace divs


#content-left {
width : 500px;
float : left;
border-left-width : 1px;
border-left-style : solid;
border-left-color : #000000;
border-bottom-width : 1px;
border-bottom-style : solid;
border-bottom-color : #000000;
margin-bottom : 10px;
position : relative;
top : -15px;
z-index : 1;
}
#content-right {
width : 160px;
float : right;
background : #ccc;
position : relative;
top : -35px;
right:30px;
z-index : 10;
}


let me know, i will work on the rest.

just so you know the lower the number on z-index, the less important it is for coming to the top!!

JC, thanks for the tips, what I did was increased the size of the content-left div and got it within a pixel of the gray bar.
I'm a little concerned that if the content-left width is ever 1 pixel larger, the grey bar will jump below to fit everything in... if you have a better method for this let me know.

As you can see now, the height of the grey bar is still determined by its content, in this case, loads of P tags. How can I get it to dynamically stay the height of the content-left area?

Thanks for your help, I really appreciate it.

im not sure if this will work, and if anyone will let me know also, but if you have the left content and the grey bar in a self wrapper, you could set the height of the grey(right content) to 100%.

so possibly when the content on the left gets larger it will push the wrapper down so causing the right to become larger also.

ex... im not sure if u have this, im at home right now so i cant see..


#wrapper {
width:600px;
height:auto;
.....}

#leftContent {
......
height:100%
}

#rightContent {
......
height:100%
}


html

<div id="wrapper">
<div id="leftContent"></div>
<div id="rightContent"></div>
</div>


not sure, but that might work, good luck man!!!