image left aligned with text wrapping around it?

[badams1]

How do I get an image left aligned with text wrapping around it or the text can be a block to the right of the image using css?

[Greven]

Add

style="float: left;"

to the image tag, and the text should flow around it, with it on the left.

[edited by: Greven at 5:06 pm (utc) on May 31, 2005]

[badams1]

wow that was quick.

Thanks worked like a charm.

[badams1]

any other way to do it? Cause now that I've added other stuff to the page (like an horizontal rule) it isn't aligning at the bottom of the image like it needs to (or at least in FF anyways).

I have valid xhtml 1.0 transitional and valid css.

here is the code:
img {
float: left;
}

hr {
color: #000099;
width: 90%;
height: 1px;
text-align: center;
}

#wrapper{
position: relative;
display: block;
width:97%;
margin:0px auto;
margin-top: 0;
text-align: justify;
}

#textr {
margin-top: 0px;
margin-left: 320px;
height: 51px;
}

and the html:
<div id="wrapper">
<div id="pic"><img src="../images/image.gif" alt="text" width="296" height="196" align="left" /></div>
<div id="textr">paragraph of text<br />
<br />
<strong><a name="link"></a>text text</strong><br />
text text text<br />
text<br />
text<br />
text<br />
text<br />
Email: <a href="mailto:addy">linky</a></div>
<br />
<br />
<br />
<hr />
<strong>yadda yadda yadda<br />

also how do I fill the text with other text that I can't read like it is done here? I used to know but forgot.

[Greven]

A quick test seems to show that the h/r is below the series of text and the image, as it should be with that markup. You may need to clarify(for me anyways) what the intended effect is, and what do you mean by you can't read it?

[Greven]

Actually I think I see what your saying in regards to the first point where the hr is over top of the textr area, if you remove the height in textr it should move the rest of the text in the wrapper below it.

[badams1]

i've got something like the following:

¦---------------------¦
¦img here text here----¦
¦img here text here----¦
¦img contact info------¦
¦ hr rule 90%----------¦
¦more text here-------¦
¦more text here-------¦
¦some links-----------¦
¦---------------------¦

is that a good enough example?

If you go to my profile I have a link under interests that goes to the page I'm having the trouble with.

[Greven]

Yeah, if you remove the height in textr it should work no problem, as I tested with the link in your interests locally on my machine with your css file.

[badams1]

dohh, that shouldn't have been there anyways.

thanks for pointing it out.

[createErrorMsg]

if you remove the height in textr it should work no problem

As long as the text in #textr is longer than the image, yes. If there's any chance that the text there will be shorter than the image (even if you never change the amount of text on the page, a user can still resize it to asignificantly smaller text size), you should take extra precautions to preserve the layout by adding a clear property to the <hr>...

hr{
clear:left;
}

That ensures that the HR stays below the image, no matter how tall #textr is.

cEM

[badams1]

got one more problem with it.

in FF the hr stays at the same point so if you make the window smaller (say 800x600) the text goes behind it. In IE it doesn't do this.