[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • Last Modified:

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.)|
   ------------------------------------

0
bakum
Asked:
bakum
1 Solution
 
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
 
bakumAuthor Commented:
Sorry it took so long to grade.  Excellent.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now