CSSが意味不明な挙動をします

Question

CSSが意味不明な挙動をしていて困っています。そのスクショを以下に表示しています。

また、このページのURLを以下に記します。
http://togetsu.org/events/test.html

左上の丸いやつは縦横200pxで、横の「テスト」と書かれているDIV要素の高さも200pxに設定しています。
丸い画像の横に置きたいのですが、下に突き出てしまいます。

以下ソースです。HTMLについては、underscore.jsのテンプレート機能を用いています。

<div class="event-banner" style="background-image:url(../img/mon/<%- data.banner[i] %>);"></div>
<div class="event-title">
  <%- data.title[i] %>
</div>

div.body div.event-banner {
	display: inline-block;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-size: 480px 270px;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

div.body div.event-title {
	display: inline-block;
	margin: 0 10px;
	height: 200px;
	font-size: 28px;
	font-weight: 500;
}

どうぞよろしくお願いします。

Answer 1

display プロパティと float プロパティの挙動についてよく調べてみると良いかもです。

div.body div.event-banner {
    display: block;
    float: left;
    /* 略 */
}
div.body div.event-title {
    display: block;
    /* 略 */
}