img and text block in a line.

Posted on 2006-04-13
Last Modified: 2012-06-27

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!

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>

Here is the CSS for the elements:

#columnOne {
      border-right:1px solid #d6d6d6;

#columnOne .featuredContent {

#columnOne .featuredContent h2.icon {
      padding: 0px;

#columnOne .featuredContent h2.icon img {

#columnOne .featuredContent h2.icon p {

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

Question by:bakum
    LVL 5

    Accepted Solution

    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; }

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

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

    Author Comment

    Sorry it took so long to grade.  Excellent.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    Suggested Solutions

    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now