リンク文字が折り返される理由がわかりません

Question

ロゴの隣にリンクを入れたいのですが、なぜか改行されて２段になります。
HTML5が使えるIE10以上では折り返さないのですが、
互換モードを利用すると折り返してしまいます。

どこを直せばよいか誰かわからないでしょうか？

<div id="groupHeaderLogo">
	<a tabindex="-1" href="#">
		<img src="images/logo.jpg"  height="17">
	</a>
	<div id="globalHeaderLogout">
		<a tabindex="-1" href="#">ログアウト</a>
	</div>
</div>

CSS

/* groupLogo */
#groupHeaderLogo{
	margin: 0px 0 0 0;
	padding: 10px 0px 0 0;
	width: 100%;
	text-align: right;
}
#groupHeaderLogo a{
	text-decoration: none;
	margin: 0;
	padding: 0;
}

/* Logout */
#globalHeaderLogout{
	margin: 0 0 0 15px;
	padding: 1px;
	width: 86px;
	text-align: right;
	vertical-align: middle; /*上下中央*/
	float: right;
}
#globalHeaderLogout a{
	margin: 0;
	padding: 0px;
	width: 80px; /* ボタン幅 */
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	display: block;
	font-size: 12px;
	cursor: pointer;
	font-weight: bold;
	border-radius: 3px; /*角を丸く*/

}
#globalHeaderLogout a:link,
#globalHeaderLogout a:visited{
	color: #454545;
	background-color: #dddddd;
}
#globalHeaderLogout a:hover,
#globalHeaderLogout a:active,
#globalHeaderLogout a:focus{
	color: #ffffff;
	background: -moz-linear-gradient(to bottom,rgb(100,100,100),rgb(120,120,120),rgb(100,100,100));
	background: -webkit-linear-gradient(to bottom,rgb(100,100,100),rgb(120,120,120),rgb(100,100,100));
	background: linear-gradient(to bottom,rgb(100,100,100),rgb(120,120,120),rgb(100,100,100));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#646464', endColorstr='#646464', GradientType=0); /* IE7,8,9 */
}

globalHeaderLogoutのid指定を外すと上手くいくのですが、スタイルが無い状態になるので困っています。
誰か教えてください

Comments

[yoshinavi]

「互換モードを利用」とありますが、古いieが対象なのでしょうか？状況によってはcss3が適用されないだけかと思いますが、質問者さんの表示させたい対象環境等（osやブウラウザのバージョン等）を併せて提示して頂くと、より良い回答を得れると思います。

-追記-
HTMLやCSS全体での影響が考えられますので、古いie向けの「条件付きコメント」や「ieハック」等を試してみると良いかと思います。

Answer 1

inlineにするのが普通かと思いますが、どうしてもfloatを使いたいなら先に書いてみてはどうでしょうか？

<div id="groupHeaderLogo">
    <div id="globalHeaderLogout">
        <a tabindex="-1" href="#">ログアウト</a>
    </div>
    <a tabindex="-1" href="#">
        <img src="images/logo.jpg" height="17">
    </a>
</div>