Problems resolving 2 columns layout CSS

Hi

I hope there is someone who can help me.
I have been designing a website and been running into a problem I have never come across before.
All my layouts have be done in CSS
the right column is not posing me any problems, but the left one does not seem to automatically follow the height of the right one and is causing adjustment problems, esp in IE.


How can I create 2 columns that automatically adjust to each others size and that are IE and Firefox compatible? how can i solve this problem?

See CSS code below

many thanks
Nat

This is my CSS code
for the wrap (holder)
#holder {
width: 1000px;
background: #847C64;
text-align: left;
margin: 0 auto;
padding-top: 0px;
padding-bottom: 10px;
border-top: thick solid #9FB75F;
border-right: thick solid #9FB75F;
border-bottom: thick none #9FB75F;
border-left: thick solid #9FB75F;
}

This is the left column
#imagediv {
width: 185px;
float: left;
border-top: thin groove #9FB75F;
border-right: thin groove;
border-bottom: thin groove #9FB75F;
border-left: thin solid #333333;
height: auto;
background: #FBFCCF;
padding-top: 15px;
padding-right: 10px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: 1px;
list-style: square;
color: #333333;
font-weight: normal;
}
And the right column
#content {
margin: 0 0 0 210px;
padding: 15px;
border-left: thin solid #9FB75F;
background: #EAF5C5 url(runner%20grey%20copy.jpg) no-repeat scroll right bottom;
border-top: thin groove #9FB75F;
border-right: thin solid #333333;
border-bottom: thin groove #9FB75F;
border-left: thin solid #9FB75F;
height: inherit;
}