Text wraping around an image [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 10 years ago.

I'm trying to get some text t开发者_开发技巧o wrap around an image:

http://69.143.137.155/csa-consulting/

See the image of the grad cap? I'm trying to get the text next to it to be to the right of the grad cap (even with the top) until it gets longer than the image, then for it to use the full space.

Any ideas?

Thanks!

---

Float the image left.

.someclass
{
   float: left;
}

---

I don't really understand the part you mean (even with the top), but what I would recommend is to include float:left style to your image,

<img src="images/grad_cap.jpg" style='float:left' />

remember to put a clear:both at the next element to ensure everything is reset to normal. e.g.

<div style='clear:both' />

There is a very good tutorial here that gives you step-by-step walkthrough of what you need, http://css.maxdesign.com.au/floatutorial/

Regards,
Andy.

---

<div style="overflow:auto">
       <div style="float:left;">
          <img src="#" style="margin-right:10px;"/>
       </div>
       <div style="float:right;">
           text goes here.
       </div>
</div>

CSS floats will achieve the effect you want. Overflow auto on the parent element 'clears' the float so that base of the container extends to the height of both child elements (it achieves the same as clear:both).

If you want some space between the image and the text, either put some margin / padding on the image, or define the widths of the left, and right floated div's to allow some space between.

( By putting the margin/padding on the image, rather than the floated div, you avoid an Internet Explorer 6 bug where margins are doubled on floated elements. )