Need help please (Content being pushed outside div)

Hey Dears,
i faced a problem in css , the problem is that the content being pushed outside DIVs(any div) , i do not want use overflow because it hide the content , but what i need is keep the content like it is but inside the box(multiline).
The HTML source is :

<div id="wrapper">
<div id="main">
<!-- Right Coll -->
<div class="rit">Right Coll</div>
<!-- Left Coll -->
<div class="lft">Content goes Here!</div>
<!-- middle Coll -->
<div class="mid">right Coll</div>
</div>
</div>

HTML:

the css source :

body{
	padding:0;
	margin:0;
	font-size: 11px;
	font-family:tahoma,"Arabic Transparent","Traditional Arabic,Arial";
	background:#eaeef1 url('images/backgrounds.gif') scroll repeat-x;
	background-position: 0% -680px;
	color: #333333;
	direction:rtl;
}
#wrapper{
	margin:0pt auto 0pt auto ;
	width: 974px;
}
#main{
	padding: 5px 5px 4px;
	*padding-bottom:5px;
	background-color: #ffffff;
	border:solid 1px #afc2e0;
	border-width:0px 1px 1px 1px;
}
.rit, .mid, .lft { background:#ffffff;display: block;}
.rit { float:right; width:148px; margin-left:12px; _margin-left:10px;}
.mid { float:right; width:489px;}
.lft { float:left; width:300px; margin-right:10px;}

Code (markup):

anyidea ?

 

try this :
.rit, .mid, .lft { background:#ffffff;display: inline-block;}