homepage Welcome to WebmasterWorld Guest from 54.226.166.224
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
image left aligned with text wrapping around it?
badams1




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

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




msg:1223533
 4:49 pm on May 31, 2005 (gmt 0)

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




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

wow that was quick.

Thanks worked like a charm.

badams1




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

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




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

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




msg:1223537
 7:45 pm on May 31, 2005 (gmt 0)

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




msg:1223538
 7:47 pm on May 31, 2005 (gmt 0)

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




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

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




msg:1223540
 7:58 pm on May 31, 2005 (gmt 0)

dohh, that shouldn't have been there anyways.

thanks for pointing it out.

createErrorMsg




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved