Opera & CSS: Trouble with bordering

Hello,

I'm having some troubles with the footer of my website. In IE(7) I don't have got any problems with it, but when viewing in Opera the border arround my footer is all messed up. My border is being collapsed up to a 2px line in Opera while the <p> tag should be inside the border, have a look..

IE (how it should be) http://comiteg.maartenprovo.net/err/ie.htm
Opera (wrong) http://comiteg.maartenprovo.net/err/opera.htm

Here is my CSS file:

body{
	background-color: #a0a0a0;
}
div#container{
	margin: 0px 0px 0px -400px;
	position:absolute;
	left:50%;
	overflow: hidden;
}
div#header{
	width: 800px;
	height: 250px;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #696969;
	margin: 0px 0px 15px 0px;
}
div#main p{
	clear: both;
	margin: 15px 15px 15px 15px;
}
div#side{
	float: left;
	width: 200px;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #696969;
	background-color: #bfbfbf;
	margin: 0px 15px 0px 0px;
}
div#content {
	float: left;
	width: 583px;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #696969;
	background-color: #bfbfbf;
}
div#footer p{
	float: right;
	margin: 10px 10px 10px 10px;
}
div#footer{
	clear: both;
	width: 800px;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #696969;
	background-color: #bfbfbf;
}

Code (markup):

Note also that in IE my footer is at an exact distance of 15px away from my content, while there is no margin set in footer or content in my CSS file,,

Hope anyone can help me,,

 

What's your code for clearing floats?

Try taking off float:right from div#footer p and check if it fixes opera.
If it does then you just have to clear the float.

Just a suggestion, a simpler way to write the border for div#footer would be border:1px solid #696969; as a substitute for :

border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #696969;

Code (markup):

 

This fixes the problem indeed, and for my text I'm just using text-align now. Still I have the fixed distance between my footer and content only in IE.. Maybe it's somewhere in my html itself,, I'll look for that tmorrow.

 

For those with the same problem, the reason why my content and footer are 15 px seperated from each other only in IE (and not in Opera) is because of the float: left I'm using in my content. It seems to work by using a margin with negative values in the footer and the same margin (but with positive values) in the content.

Here's what my footer and content look like now:

div#content {
	float: left;
	width: 583px;
	border:1px solid #696969;
	background-color: #bfbfbf;
	[B]margin: 0px 0px 15px 0px;[/B]
}
div#footer{
	clear: both;
	width: 800px;
	border:1px solid #696969;
	background-color: #bfbfbf;
	[B]margin: -15px 0px 15px 0px;[/B]
}

Code (markup):