Navigation Colum with same height as content

Hello,

i redesign a Website to get rid of some tables.

My Problem is:
the navigation has a blue background and should be the same length as
the content.

i tried putting them in one parent div, and the parent div has the
right height (as high as the content).
<div id="parent">
<div id="nav">
</div>
<div id="content">
</div>
</div>
But the navigation keeps as high as the text in it, even with
height:100%
(BTW: navigation is longer than screen height, content is even much
longer)

i tried putting both of them in a table like
<table>
<tr>
<td>
<div id="nav">
</div>
</td>
<td>
<div id="content">
</div>
</td>
</tr>
</table>

but that doesnt work at all.


i assigned height:100% to body and all parent elements.
Nothing works.
:-(

Any ideas, how i can make it work?


Here is some css:

#navigation{
background-image:url(/images/backgrounds/navi_links.gif);
background-color: #BECEDD; background-repeat:no-repeat;
width:163px;
float:left;
height:auto%;
border: 1px solid #000;


}


#bodydiv{ /*the content block*/

position:relative;
/* float:left;*/

}



Thank you


T. Henke