img and text block in a line.

Hi,

I have a series of H2 elements, sized 190w X 34h that we want to have as look as follows:
the far left of the H2 is a square graphic, 34x34, and then to the right of the graphic is supposed to be a block of text.  The text should layout entirely to the left of the H2, centered vertically.  All I can get it to do, though, is get it to either wrap below the image entirely and left justify, which is wrong, or have the first line of text aligned with the bottom of the graphic and then the rest wraps below the graphic and justifies left.  

Thanks in advance!
-mb

This is the code for the HTML:

<div id="columnOne"> <--container div holds a few of these child divs.
 <div class="featuredContent"> <--container div holds a few of these H2's in a column along with some other stuff
  <h2 class="icon">
   <img src="/images/callout/cfp_icon.gif" /><p>Text should go here and it should wrap like this which would be nice.</p>
  </h2>
 </div>
</div>

Here is the CSS for the elements:

#columnOne {
      float:left;
      width:200px;
      background-color:#ffffff;
      min-height:1051px;
      border-right:1px solid #d6d6d6;
      padding:auto;
}

#columnOne .featuredContent {
      width:190px;
}


#columnOne .featuredContent h2.icon {
      text-align:left;
      padding: 0px;
        margin:0px;
}

#columnOne .featuredContent h2.icon img {
      display:inline;
      margin:0px;
}

#columnOne .featuredContent h2.icon p {
      display:inline;
      vertical-align:top;
      margin:0px;
}



   ------------------------------------
  |IIIIIIIII  Text should go here    |
  |IIIIIIIII  and it should wrap like|
  |IIIIIIIII  this, which would be   |  <-- It's supposed to look like this
  |IIIIIIIII  nice.                          |
   ------------------------------------
   ------------------------------------
  |IIIIIIIII                                  |
  |IIIIIIIII                                  |
  |IIIIIIIII                                  |  <-- but it looks like this....
  |IIIIIIIII  Text should go here   |
  |and it should wrap like this,   |
  |which would be nice.             |
   ------------------------------------

   ------------------------------------
  |IIIIIIIII                                  |
  |IIIIIIIII                                  |
  |IIIIIIIII                                  |  <-- or this
  |IIIIIIIII                                  |
  |Text should go here and(etc.)|
   ------------------------------------

bakumAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

tdterryCommented:
Float the image to the left of the text, and probably remove the <p> from around the text.

<style type="text/css">
.icon img { float: left; }
.icon { clear: both; }
</style>

<h2 class="icon">
   <img src="/images/callout/cfp_icon.gif" height="100" width="100"/>Text should go here and it should wrap like this which would be nice.
</h2>

This will wrap the text as in your first example.  Note however that if the text is still too long, it will continue directly under the image.

 ---------------------------------
  |IIIIIIIII  Text should go      |
  |IIIIIIIII  here and it should |
  |IIIIIIIII  wrap likethis,        |
  |IIIIIIIII  which would be     |
  |nice.                               |
   -------------------------------
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
bakumAuthor Commented:
Sorry it took so long to grade.  Excellent.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.