Nilesh's Weblog

Super Ragged Floats 2

Looks like I am obsessed with ragged floats. Yes, absolutely. Why wouldn't browsers have a simpler way of wrapping text around images? More research on ragged floats lead to this spanking new approach to wrapping around irregular outlines. This one uses pure divs and no backgrounds. Plain simple images and plain simple divs. Read More »

You really need to read Super Ragged Floats version1 to understand all this. Lets get down to the actual work directly. Experimenting with backgrounds, I found them a bit uncomfortable to work with. Plus, when a background image is being downloaded, there is no indication to the user. He assumes the page has loaded completely and goes on with his work. So I thought, let's put the image back on the page. So how do we wrap text around it. Use margins!

I used the following id definition for the div:

#toycycle{
    margin: -395px 0 0 0;
    padding: 0 0 0 0;
    height: 400px;
}

This tells the browser to push the div toycycle 400 pixels (the height of the image) above its default position on the page. The height: 400px rule avoids hiding the image behind text if the text is too less. We are going to place the image before this div so that the div starts from the image itself. For wrapping text, instead of using transparent spacer gifs, which are hated by most designers nowadays, we again use divs with this class:

.flowing {
    clear: left;
    float: left;
    margin: 0 2em 0 0;
    height: 15px;
}

The float:left attribute allows the div to stick to left side and the clear:left attribute clears up any text on the left side of the div. You can increase or decrease the space between divs and text by changing the margin attribute. Now, you use the id and class in this way:

Some text goes here...
<img src="toycycle.jpg" width="350" height="395" />
<div id="toycycle">
  <div class="flowing" style="width: 150px;"></div>
  <div class="flowing" style="width: 140px;"></div>
  <div class="flowing" style="width: 140px;"></div>
  <div class="flowing" style="width: 130px;"></div>
  <div class="flowing" style="width: 130px;"></div>
  ...
  <div class="flowing" style="width: 250px;"></div>
  <div class="flowing" style="width: 250px; 
     height: 8px;"></div>
... More text ... comes here.
</div>

Place the transparent images before the text and place them only as much required. For example, assuming the background image has a height of 400pixels, if you take each image 20pixels high, you'll need about 20 transparent images stacked up to cover up the whole image. Adjust the width of each image accordingly. You can experiment with this to achieve smooth text flow over the image. Like the last line of the divs. I have changed the height of the last image for more tighter layout. See a live example on my About page.

An Example: