Im trying to display both the sub_menu and the sub_img div tags inline, so that the sub_img tag is to the right rather than underneath. I've spent the last hour trying different variations of the display css, i must be missing something and could do with a new pair of eyes.

Thanks in advance, Chris1990

HTML:
HTML Code:
<body>
<div id="sub_middle">
  <div id="sub_menu" style="display:inline-block">
    <ul>
    <li><a href="/">Display Image One</a></li>
    <li><a href="/">Display Image Two</a></li>
    <li><a href="/">Display Image Three</a></li>
    <li><a href="/">Display Image Four</a></li>
    <li><a href="/">Display Image Five</a></li>
    <li><a href="/">Display Image Six</a></li>
    <li><a href="/">Display Image Seven</a></li>
    </ul>   
 </div>
 <div id="sub_img" style="display:inline-block">   </div>
</div>
</body>
CSS:
Code:
#sub_middle {
	width:950px;
	height:auto;
}

#sub_img { 
	width:600px;
	height:250px;
	background-color:#663366;

}

#sub_menu { 
	width:300px;
	height:250px;
}

#sub_menu ul { 
	margin:0 0 10px 0;
	padding:0;
	width:300px;
}

#sub_menu ul li { 
	padding:2px 0 6px 7px;
	background-image:none;
	background-repeat:no-repeat;
	background-color:#cccccc;
	list-style-type:none;
	line-height:26px;
	margin:0;

}

#sub_menu ul li a {
	list-style-type:none;
	color:#1232EB;
	font-size:110&#37;;
	font-weight:bold;
	text-decoration:none;
	display:block;
	padding:0;
	margin:0;
	
}

#sub_menu ul li a:hover { 
	color:#6F83F4;
}