Floating image in text problem

This site is best viewed in a modern browser with JavaScript enabled.

ErikTheSick

Hi everyone

I'm stuck with a little problem. I like to have floating images in my text like here:
http://www.meijer.li/php/biking/wildspitz.php
But I would like to start a new title on a below the image and it's description which are floating to right side. Any idea how i can do this without using tables?

Thanks and cheers
/erik

TJ111

It's not hard, just wrap the image and anything you want associated with it in a div.

div.image { 
  width:20%;
  float:left;
  text-align:center;
}
div.image p {
  text-decoration:italic;
}

then in your html

<h2>Overview</h2>

<div class="image">
  <img src="/path/to/image.jpg">
  <p>Image Description</p>
</div>

<p>This text will wrap around the image and its
description, if it's long enough.</p>

ErikTheSick

Thanks for your reply mate, but that is what I already have. So text is wrapping properly around the image if it is big enough.
The problem is, if it is not big enough, the title of the next paragraph wraps also around the image, an I like to prevent that.
I hope I made myself clear now...

TJ111

Oh, I see what you mean. You can do either of the following to prevent that:

<h2 style="clear:left">

Or better

.clearL {
  clear:left;
}


<h2 class="clearL">

//this way you can prevent from having to write multiple inline styles throughout your source.

ErikTheSick

yes, thats right what I was looking for.
thanks a lot mate!