Text Aligned Next To Photo in CSS

Question

I am wondering if there is some way to align text on the right of a photo, and keep the text in that same "box" even after the image ends using HTML and CSS. A quick "diagram" of what I am attempting to accomplish is below:

------- --------
------- --------
-Image- - Text -
------- --------
------- --------
        --------
        --------

Thanks for any help!

Solution 1

If you set a width on the text div and float both the Image and the Text left (float:left), that should do the trick. Clear the floats after both.

<div style="float:left; width:200px">
    <img/>
</div>

<div style="float:left; width:200px">
    Text text text
</div>

<div style="clear:both"></div>

Solution 2

DEMO: http://jsbin.com/iyeja/5

    <div id="diagram">
            <div class="separator"></div>
            <div class="separator"></div>

            <div id="text_image_box">
              <span class="image"><img src="http://l.yimg.com/g/images/home_photo_megansoh.jpg" alt="" /></span><span class="text"><p>some text</p></span>
              <div class="clear"></div>
            </div>

            <div class="separator"></div>
            <div class="separator"></div>
            <div class="separator"></div>
          </div>

    <style>
      /* JUST SOME FANCY STYLE*/
      #diagram { 
        width:300px;
        border:1px solid #000;
        padding:10px;
        margin:20px;
      }

      .separator { 
        height:2px;
        width:300px;
        border-bottom:1px dashed #333;
        display:block;
        margin:10px 0;
      }

      /* MAIN PART */
      #text_image_box { 
      width:300px;
      margin:0 auto;
      padding:0
      }

      .image { 
        float:left;
        width:180px;
        height:300px;
        overflow:hidden;
         margin:0 auto;
      }
      .text {
    float:right;
    width:100px;
    padding:0;
    margin:0 auto;
  }
  .text p { 
    margin:0;
    padding: 0 5px;
  }
      .clear {
      clear:both
      }
      </style>

Solution 3

Put the text in some kind of container, and float that container next to the floated image. The following code sample should give you the idea:

<img src="..." style="float:left; width: 200px;" />

<div style="float:left; width: 400px;">
    <p>Bla bla...</p>
    <p>Bla bla...</p>
    <p>Bla bla...</p>
</div>

If you need some container around those two elements to automatically fit its height to the highest of the two floated elements, you can set a overflow: hidden on that container. To make it work in IE6 as well, you will need to revert that to overflow: auto and add something bizarre like height: 1px.