Welcome to WebmasterWorld Guest from 50.16.78.128

Forum Moderators: not2easy

Message Too Old, No Replies

image left aligned with text wrapping around it?

   
4:48 pm on May 31, 2005 (gmt 0)

10+ Year Member



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?
4:49 pm on May 31, 2005 (gmt 0)

10+ Year Member



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]

4:57 pm on May 31, 2005 (gmt 0)

10+ Year Member



wow that was quick.

Thanks worked like a charm.

7:20 pm on May 31, 2005 (gmt 0)

10+ Year Member



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.

7:36 pm on May 31, 2005 (gmt 0)

10+ Year Member



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?
7:45 pm on May 31, 2005 (gmt 0)

10+ Year Member



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.
7:47 pm on May 31, 2005 (gmt 0)

10+ Year Member



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.

7:57 pm on May 31, 2005 (gmt 0)

10+ Year Member



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.
7:58 pm on May 31, 2005 (gmt 0)

10+ Year Member



dohh, that shouldn't have been there anyways.

thanks for pointing it out.

8:22 pm on May 31, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

1:19 pm on Jun 1, 2005 (gmt 0)

10+ Year Member



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.