Wrapping text & block elements around images

Question

I know it's easy enough to wrap text around images by floating the image right or left & then putting your text after it, but what I am wanting to do is wrap other elements around it as well, such as div's.

I tried to set my div to inline & this worked fine, however once I added other divs inside that div it still looked fine, but when looking at it in Firebug the little blue line that shows the element you are hovering over in the code extended over the image as well & when I attempted to add padding to the container div it didn't work & you could see that was because the padding was added right at the end.

I ended up getting it to look ok but adding padding to the image, however it still doesn't seem the right way to go about it seeing as Firebug doesn't like it & I am worried about compatibility issues.

Here is an image of what I am trying to do.. the gray area is where I want the text/elements to wrap & the brown is the image.

Here is some example code: (This example is the not wrapping version)

<div class="main">
    <img src="../images/work/example.png" width="275" height="233" class="screenshot" alt="Example" />
    <div class="details">
        <div class="about">
            <div class="title">
                About:
            </div>
            <div class="info">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                                
            </div>
            <!-- Info Ends -->
        </div>
        <!-- About Ends -->
    </div>
    <!-- Details Ends -->
    <div class="contentClear"></div>
</div>
<!-- Main Ends -->

Example CSS:

#content .wrapper .left .main {
    padding-top: 20px;
    width: 550px;
}

#content .wrapper .left .main .screenshot {
    float: right;
    border: 1px solid #c0c0c0;
    width: 275px;
}

#content .wrapper .left .main .details {
    width: 263px;
    padding-right: 10px;
}

#content .wrapper .left .main .details .title {
    color: #0F5688;
    font-size: 1.8em;
    font-family: arial;
    font-weight: bold;
}

#content .wrapper .left .main .details .info {
    margin-top: 6px;
    font-size: 1.3em;
    font-family: Arial;
    color: #636363;
    line-height: 1.6;
}

Here is an image showing the issue FireBug has with it (from the JSFiddle example), as I say it looks fine on the browser, but seeing as the firebug bar extends all the way over the image I was worried that may cause problems..

Answer 1

Yes, the correct way to move something to one side and have stuff wrap around it is to float the element.

In the example below (simplified from your code), adding padding to the floated image works just fine.

CSS:

.main .screenshot {
    float: right;
    border: 1px solid #c0c0c0;
    padding: 5px;
}

.main .title{
font-size: 140%;
}

HTML:

<div class="main">
  <img src="img/png" width="150" height="117" class="screenshot" alt="Example" />
  <div class="details">
    <div class="about">
      <div class="title">About:</div>
      <div class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
  </div>
</div>

Demo jsFiddle