Hello,

I am trying to float two divs (blocks) infront of each other within a container

I want them to appear like this:



Code HTML4Strict:
<div id="center-content">
<h4>BLABLAB BALA BLABLA</h4>
<p>
ARABIC TEXT<br /><br>
فوائد الاشتراك:<br>
-تسويق لمعارضك ومحلاتك ومنتجاتك.<br>
-تسويق لمعارضك ومحلاتك ومنتجاتك.<br>
-تسويق لمعارضك ومحلاتك ومنتجاتك.<br>
<br>
قوانين:<br>
-تسويق لمعارضك ومحلاتك ومنتجاتك.<br>
-تسويق لمعارضك ومحلاتك ومنتجاتك.<br>
 
</p>
 
<ul class="subscription">
<li>
1ST BLOCK CONTENT</li>
 
<li>
2ND BLOCK CONTENT</li>
</ul>
 
</div><!-- END CENTER CONTENT -->

This is my CSS:

Code CSS:
#center-content h4 {
	text-align:right;
	color:#333333;
	font-size:1.5em;
	margin:0px;
	padding:0px;
	margin-bottom:15px;	
}	
 
#center-content p {
	clear:both;
	margin:0px;
	margin:0px;
	text-align:right;
	direction:rtl;
	font-size:1.1em;
}
 
ul.subscription {
	list-style:none;
	padding:0 0 10px ;
	margin:0;
	margin-top:20px;
	width:100%;
	border:1px solid #D8D8D8;
 
}
 
ul.subscription li {
	padding:10px;
	width:250px !important;
	background: #F4F4F4;
	border:1px solid #d8d8d8;	
	float:left;
	overflow:hidden;
	text-align:right;
}

However, with ul.subscription li float:left it appears like follows: as if the li is laid out the container.



Any ideas on what I am missing