[Rand Brittain]

So, I've been putting together a book with frequent title/icon combinations, and I've been putting the icon PNGs in an SVG tag to make sure they size right. So far, it's worked pretty well.

But now, I've run into a title with two icons, and I've been trying to figure out how to make them display side-by-side. They don't seem to want to do it.

Here's the title page:

<h2 class="iconic-title" title="Adversity">O<span class="small-caps">UTSIDE-</span>D<span class="small-caps">UST</span> T<span class="small-caps">REATMENT</span></h2>

  <div class="iconic-image-left">
    <svg xmlns="http://www.w3.org/2000/svg" height="20%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 511 553" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="553" width="511" xlink:href="../Images/Pastoral.png"></image>
    </svg>
  </div>

  <div class="iconic-image-right">
    <svg xmlns="http://www.w3.org/2000/svg" height="20%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 475 542" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="542" width="475" xlink:href="../Images/Heroic.png"></image>
    </svg>
  </div>

  <p class="iconic-marker">Shared Action or Adversity</p>

And here's the CSS:

.iconic-title {
	page-break-before: always;
	padding-top: 20%;
}

.iconic-image {
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.0em;
	max-width: 30%;
}

.iconic-image-left {
	margin-top: 1.0em;
	max-width: 50%;
	float: left;
}

.iconic-image-right {
	margin-top: 1.0em;
	max-width: 50%;
	float: right;
}

.iconic-marker {
	font-style: italic;
	text-align: center;
	text-indent: 0;
	font-size: 85%;
	margin-top: 1.0em;
	page-break-after: always;
}

What am I doing wrong?