title: Floating image with text - CSS text alignment
body: <p>I run a buying and selling site. On the following page when you click the sellers items, it opens a floating enlargement (Nyromodal) and displays the items description upon it. Can anyone please tell me how to change the code below to seat the item description neatly in the bottom of the floating enlargement window, without overlapping the window as it does on some items. The web page it's on is: www.onlinecarbooty.com/go-booting.aspx</p>
  
  <p>The following is the CSS.. It's .nyroModalTitle which controls the text display. </p>
  
  <pre><code>.nyroModalBg {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.7;
  }
  
  .nmReposition {
  position: absolute;
  }
  
  .nyroModalCloseButton {
  top: -30px;
  right: -30px;
  width: 32px;
  height: 32px;
  text-indent: -9999em;
  background: url(img/close.gif);
  }
  
  .nyroModalTitle {
  right: 10%; margin: 0;
  margin-bottom:-10%;
  word-wrap:break-word; font-size: 2.3em;
  background-color: #000000; color: #ffffff; 
  }
  
  .nyroModalCont {
  overflow: hidden;   position: absolute;
  border: 4px solid #777;
  margin: 25px;
  background: #fff;
  }
  
  .nyroModalCont iframe {
  width: 480px;
  height: 400px; overflow: hidden;
  }
  
  .nyroModalError {
  border: 4px solid red;
  color: red;
  width: 250px;
  height: 250px;
  }
  
  .nyroModalError div {
  min-width: 0;
  min-height: 0;
  padding: 10px;
  }
  
  .nyroModalLink, 
  .nyroModalDom, 
  .nyroModalForm, 
  .nyroModalFormFile {
  position: relative;
  padding: 10px;
  min-height: 250px;
  min-width: 250px;
  max-width: 1000px;
  }
  
  .nyroModalImage, 
  .nyroModalSwf, 
  .nyroModalIframe, 
  .nyroModalIframeForm {
  position: relative;
  overflow: hidden;
  }
  
  .nyroModalImage img {
  overflow: hidden;   vertical-align: top;
  }
  
  .nyroModalHidden {
  left: -9999em;
  top: -9999em;
  }
  
  .nyroModalLoad {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #fff url(img/ajaxLoader.gif) no-repeat center;
  padding: 0;
  }
  
  .nyroModalPrev, 
  .nyroModalNext {
  outline: none;
  position: absolute;
  top: 0;
  height: 60%;
  width: 150px;
  min-height: 50px;
  max-height: 300px;
  cursor: pointer;
  text-indent: -9999em;
  background: transparent url('data:image/gif;base64,AAAA') left 50% no-
  repeat;
  }
  
  .nyroModalImage 
  .nyroModalPrev, 
  .nyroModalImage 
  .nyroModalNext {
  height: 100%;
  width: 40%;
  max-height: none;
  }
  
  .nyroModalPrev {
  left: 0; background-image: url(img/prevmob.png);
  }
  
  .nyroModalPrev:hover{}
  .nyroModalNext {
  right: 0;
  background-position: right 50%; background-image: url(img/nextmob.png);
  }
  
  .nyroModalNext:hover{}
  </code></pre>