Nilesh.org Notes on technology and everything else

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: