CSS Div problem

[DJMK4]

Should be fairly simple but iv tried a number of variations which dont seem to work.

if you visit

www.dmoranda.ukfsn.org/index5.html

as you can see the body div does not wrap the text so it scrolls to the right.

How do i set it so it breaks at a certain point on each line?


Also if you view in IE5/6 you will see the body div physically stretch out making the container div become larger. How do i get around this?

/* CSS Document */




/*//////Layout Objects//////*/

* {
		margin: 0;
		padding: 0;
}

body {
		margin: 3% auto;
		padding: 0;
		text-align: center;
		background-color: #CCCCCC;
}

#container {
		margin:0 auto;
		width: 70%;
		min-height: 600px;
		min-width: 850px;
		height: 600px;
		background-color: #FFFFFF;
		border:1px solid #000;
}


/*Banner size 890px X 90px*/
#banner {
		margin: 2px;
		height: 90px;
		border:1px solid #000;
		background-image: url(images/banner.gif);
		background-repeat: no-repeat;
}

#menu {
		margin: 2px;
		height:4%;
		background-color:#666666;
		border:1px solid #000;
}


#body {
		margin: 2px;
		height: 75%;
		background-color: #CCCCCC;
		border:1px solid #000;
		overflow: scroll;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}

#footer {
		margin: 2px;
		height: 18px;
		background-color:#666666;
		border:1px solid #000;
		clear:left;
		text-align: right;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color:#cccccc;
}

#phpcontainer {
		margin:0 auto;
		width: 50%;
		border: 1px solid #000000;
		padding-top: 10px;
		padding-bottom: 10px;
}		
		
		
/*/////End of Layout Objects//////*/





/*/////All Hacks//////*/


/*Box Model Hack for IE Browsers*/
* html #container {
    	width: 85%; /* for IE5 and IE6 in quirks mode */
    	w\idth: 85%; /* for IE6 in standards mode */
}

* html #phpcontainer {
    	margin-top: 0%;
		m\argin-top: 0%;
}



/*End of Box Model Hack*/




/*Hack for IE min-width*/
* html .minwidth {
		border-left:900px solid #CCCCCC;
}

* html .container {
		margin-left:-900px;
		position:relative;
}

/*\*/
* html .minwidth, * html .container {
		height: 1px;
}
/**/


/*///////End of hack for IE min-width///////*/


/* /////End of Hacks/////*/





/*//////Start Of Navigation//////*/

#nav ul{
		padding : 1px 0;
		margin : 0;
		text-align: center;
		width: 100%;
		
}

#nav li{
   		display : inline;
		list-style-type: none;
		
}


#nav ul li a{
		background-color: #666666;
   		color: #cccccc;
   		font-weight : bold;
   		text-decoration : none;
   		padding-left : 5%;
   		padding-right : 5%;
   		border:1px solid #000;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}

#nav ul li a:hover{
		background-color:#333333;
		color:#ffffff;
}
/*//////End Of Navigation/////*/


/*//////Start of Text Styles//////*/

h1 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 14px ;
		font-weight: bold ;
		margin: 5px auto ;
		text-align: center;
}

p {
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 5%;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px ;
		float: left;
		text-align: left;
}
		
/*//////End of Text Styles//////*/


.texta {
 width: 250px;
 background-color: #FFFFFF;
 height: 15px;
 border: 1px solid #666666;
 margin-bottom: 1px;
}

.textb {
 width: 250px;
 background-color: #FFFFFF;
 height: 15px;
 border: 1px solid #666666;
}

.textc {
 width: 300px;
 background-color: #FFFFFF;
 height: 150px;
 border: 1px solid #666666;
}

 

[DJMK4]

I took it out because it was just a mess, very buggy...