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


---------

I. The first problem is that #content goes under #head(main header image) in firefox
like this

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..


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;
}