[GrannyGrump]

I don't know if this can be done in a way that works on most screen widths.

My image is an inverted L-shape, and text wraps inside the L beside the narrow leg, but no text-flow allowed next to the horizontal wide leg.

I want to center the image on the screen, and it works well for a narrow screen. But in a very wide window, such as a full-screen browsing window, the text overflows the image. So to keep the text from overflowing the upscaled image, I have to let the image sit left- or right-aligned.

Screenshots are from Sigil. I couldn't check with ADE, when I widen the screen I get two columns, or the image fills the screen and the text falls off onto the next page.

So, is there any answer to this quandry, or should I just let the images sit where they are comfortable?

Here is the CSS I'm using

/*IRREGULAR IMAGES
thanks to Jellby and Zelda Pinwheel on MobileRead forums*/

div.ellshapeLeft,
div.ellshapeRight { 
	border: 0; padding: 0;
	margin: 0 0 .75em 0;
	text-indent: 0;
	}
	div.ellshapeRight { 
		text-align: right; /*THIS IS WHERE I WANT TO SET IMAGE TO ALIGN CENTER*/
}
div.ellshapeRight img,
div.ellshapeLeft img {
  text-indent: 0;
  width: 100%;
  max-width: 750px;
}
div.ellshapeRight div,
div.ellshapeLeft div {
	text-indent: 0;
   margin: 0;
}
div.ellshapeRight div.picture,
div.ellshapeLeft div.picture {
  width: 100%;
  height: 1em;
  margin: 0 0 0 0; 
  overflow: visible;
  text-indent: 0;
}
div.ellshapeRight div.top,
div.ellshapeLeft div.top,
div.ellshapeRight div.bottomRight,
div.ellshapeLeft div.bottomLeft {
  /* hide as much as possible */
  position: relative;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}
div.ellshapeRight div.top,
div.ellshapeLeft div.top {
  float: none;
  width: 100%;
  margin-bottom: -1em;
}
div.ellshapeLeft div.bottomLeft {
  float: left;
  clear: both;
  margin-right: .5em;
}
div.ellshapeRight div.bottomRight {
  float: right;
  clear: both;
  margin-left: .5em;
}

div.ellshapeLeft p,
div.ellshapeRight p {
	text-indent: 0;
	font-size: smaller;
	font-style: italic;
	}
	div.ellshapeRight p {
  		text-align: right;
}

div#chair div.bottomRight {
	width: 42%; /*260px*/
 	max-width: 325px; /*constrains text-wrap margin when img upscales*/
}
div#garrison div.bottomRight {
	width: 38%; /*230px*/
 	max-width: 300px;
}

and here is the HTML

      <div class="ellshapeRight" id="chair">
        <div class="picture"><img alt="The Queen’s Chair" src="../Images/p067.jpg" /></div>

        <div class="top"><img alt="" src="../Images/p067auxTop.png" /></div>

        <div class="bottomRight"><img alt="" src="../Images/p067auxBotm.png" /></div>

        <p>“Queen’s Chair”</p>
      </div>