Block or inline-block, struggling again :(

HTML & CSS
1

I have bit of a block I guess, but I can’t get a simple menu line up properly. The situation is the following. I have a header with left the logo:


#header {
	width: 880px;
	float: left;
	clear: both;
	position: relative;
	z-index: 10;
           margin: 0 10px;
}

#header .logo {
	width: 480px;
	float: left;
}

#header .logo a {
	width: 480px;
	height: 78px;
	line-height: 78px;
	display: block;
	position: relative;
}

#header .logo a span {
	width: 100%;
	height: 100%;
	position: absolute;
	background: url(../images/site/logo.gif) 0 0;
}

The right side need to be build up by a top menu and under that two language flags where I want the last menu item to align right with the second flag:


#header .top_menu {
	display: inline-block;
	padding-top: 10px;
	float: right;
	text-align: right;
}

#header .top_menu li {
	float: left;
	height: 20px;
	line-height: 20px; 
}

#header .top_menu li + li {
	border-left: solid 1px #bdc4c6;
}

#header .top_menu li a {
	height: 20px;
	line-height: 20px; 
	padding: 0 8px
	color: #6e6e6e;
	text-decoration: none;
	font-size: 80%;
}

#header .flags {
	width: 60px;
	margin-top: 10px;
	float: right;
	display: block;
	position: relative;

}

#header.flags li {
	float: left;
}

#header .flags li a {
	width: 24px;
	height: 24px;
	padding-left: 6px;
	display: block;
}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
    <div id="header">
			<!-- .logo -->    
    	<div class="logo">
      	<a href="#"><span></span>Nafplio Tours</a>
      </div><!-- .logo -->
    	
      <ul class="top_menu">
      	
      	<li><a href="#">Home</a></li>
				<li><a href="#">Sightseeing</a></li>
        <!-- 4 more menu items -->
      </ul>
      <ul class="flags">
        	<li><a href="#"><img src="country_flags/eng.png" alt="" /></a></li>
					<li><a href="#"><img src="country_flags/gre.png" alt="" /></a></li>
      </ul>
   
    </div>
</body>
</html>

As you can see I use inline-block on the <ul>. This is working okay for one of the two languages, but because of the difference in characters for the second language it isn’t working, instead the flags are lining up left from the menu. How can I avoid this and do I make the top_menu align with the flags?