Faux Columns Problem

[jorji]

Hello,
I have two problems, but first..

this is css code


#wrapper {
width: 975px;
height: auto;
margin: 0 auto;
overflow: hidden;
}

#content {
width: 773px;
float: left;
position: relative;
top: -110px;
margin: 0;
background-color: #ebebeb;
padding-bottom: 1000em;
margin-bottom: -999.5em;
}


#subContent {
width: 202px;
height: 100%;
float: right;
background-color: #78732c;
padding-bottom: 1000em;
margin-bottom: -999.5em;
}

and this is html structure
http://img168.imageshack.us/img168/6837/t3bj6.jpg

---------

I. The first problem is that #content goes under #head(main header image) in firefox
like this
http://img168.imageshack.us/img168/721/t1dk5.jpg
I have tried with big z-index, but it there isn`t any change

---------

II. And the second major problem is that in IE 7 the big padding and margin value create big space in the bottom and there is scrollbar..
http://img168.imageshack.us/img168/8675/t2nk4.jpg

and here is the online version
http://www.agresiam-inc.com/wip/tenerife.htm

[Snookerman]

#2 Remove this:

#content {
width: 773px;
float: left;
position: relative;
top: -110px;
margin: 0;
background-color: #ebebeb;
padding-bottom: 1000em;
margin-bottom: -999.5em;
z-index: 10000;
}
#subContent {
width: 202px;
height: 100%;
float: right;
background-color: #78732c;
padding-bottom: 1000em;
margin-bottom: -999.5em;
}

[Snookerman]

#1 Remove this:

#wrapper {
width: 975px;
height: auto;
margin: 0 auto;
overflow: hidden;
}

[jorji]

and than, how to make the column heights(of #content and #subContent) to be equаl?
make a a suggestion

[Snookerman]

Try this:

#subContent {
width: 202px;
height: 100%;
float: right;
background-color: #78732c;
height:918px;
}