How to place logo and nav in the same line with 100% width?




Code:
<div id="top_header">
			<img id="logo "src="images/pic.png" />
			<nav id="navi">
				<ul>
					<li>Item</li>
					<li>Item</li>
					<li>Item</li>
					<li>Item</li>
					<li>Item</li>
					<li>Item</li>
				</ul>
			</nav>
		</div>
Code:
#logo{
	display:block;
	float:left;
	height:31px;
	width:81px;
}
#navi{
	width:400px;
}
#navi ul li{
	display: inline;
}
#navi li{
	padding:7px;
	display:inline-block;
	list-style:none;
}