Hi my friend developed a site http://www.pershoreinbloom.com it looks fine in most browsers but when I view on my 14" screen with IE 7 the content text overlaps onto the background image, I am trying to help find why but am a bit flumuxed.

I was wondering if anyone could see reason for this:

The html for the content area is

Code:
<div id="content-wrap">
<div id="bottom-bg">

	<div id="top"></div>

	<div id="content">
	

    <h2><img src="img/welcome.png" alt="" /></h2>
    <p align="justify">Pershore in Bloom was formed five years ago to enhance and promote Pershore for residents and tourists alike and also to encourage community pride and participation.</p>

 <p align="justify">This we feel is achieved by encouraging organizations and schools to participate in community projects as well as providing floral displays.</p>

 <p align="justify">The Heart of England in Bloom presents awards annually to towns and villages taking part and this year, with everyone's help, we are going for gold!</p>

 <p align="justify">New members on the committee are always welcome bringing new ideas and fresh thinking – if you would like to assist please contact our Secretary or any committee member. </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
<center><a href="http://www.pershoreinbloom.com">&copy; Pershore in Bloom</a> - Managed and Hosted by <a href="http://www.eliservices.co.uk">Eli Services</a></center>


	</div><!--/content -->
	


</div><!--/bottom bg -->

</div><!--/content wrap -->


and the css

Code:
body {
	font: 100%/160% georgia;
	background: #ffffff url(img/main-bg.jpg) no-repeat center top;
	color: #333333;
	width: 100%;
	display: table;
}

#content-wrap {
	width: 904px;
	margin: 0 auto;
	position: relative;
}

#content {
	width: 750px;
	float: left;
	position: relative;
	margin: 35px 0 20px 94px;
	z-index: 5;

}