Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
How to float text to the side of a pic ?
Old 07-24-2009, 11:28 PM How to float text to the side of a pic ?
Extreme Talker

Posts: 242
Name: Digby
Location: New Zealand
Trades: 0
Hi Guys

I have I pic in a div that I want on the left, and on the right of the pic I want a short piece of text if possible vertically centered by the pic.

I have set up a class and tried the following html and css to no avail. The text shows on Firefox under the pic. Any suggestions please ?

css

.photoleft {float: left; padding:2px 0px 8px 10px; margin: 0; width: 100px;}

html

<p class="photoleft"><img src="images/picture.jpf" width="100" height="125" ><br>short text</p>

Thanks in advance
__________________
Would you like to help us sell our product ? If so please pm us
Digmen1 is offline
Reply With Quote
View Public Profile Visit Digmen1's homepage!
 
 
Register now for full access!
Old 07-25-2009, 01:03 AM Re: How to float text to the side of a pic ?
racer x's Avatar
Ultra Talker

Posts: 457
Name: Randy
Location: Northern Wisconsin
Trades: 0
The text is within the floated element. You must remove the text from the floated image. Just float the "IMAGE" left and a paragraph will wrap around it (provided you have everything else right in the CSS etc.)
racer x is offline
Reply With Quote
View Public Profile Visit racer x's homepage!
 
Old 07-25-2009, 02:21 AM Re: How to float text to the side of a pic ?
serandfae's Avatar
Do the "Evil Nanner" !!!

Posts: 8,936
Name: Tim Daily
Location: Apex, NC, US, Sol 3
Trades: 0
What he said.

Take out the line break, too. Think of <br /> like a hard return, because that's what it is. Don't forget to clear the float after you words you want to wrap around it (Check the stickies in this forum for how to do that).

So what you'll have is something like:

Code:
<div>
<img class="photoleft" src="images/picture.jpg" width="100" height="125" alt="description" />
<p>short text</p>
</div>
<br class="brclear" />
(in the css .brclear{clear:both; margin:0; padding:0; line-height:0;}

tim
__________________
SEO "experts" smell like Big Fish_|_
Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Last edited by serandfae; 07-25-2009 at 02:23 AM..
serandfae is offline
Reply With Quote
View Public Profile Visit serandfae's homepage!
 
Old 07-25-2009, 10:54 AM Re: How to float text to the side of a pic ?
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Or, to clear the float just as overflow to the div holding the floated image - no extra markup required
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 07-25-2009, 06:12 PM Re: How to float text to the side of a pic ?
Extreme Talker

Posts: 242
Name: Digby
Location: New Zealand
Trades: 0
Thanks guys
I did what racer said and it worked.
(I need to study floats more and /br)
__________________
Would you like to help us sell our product ? If so please pm us
Digmen1 is offline
Reply With Quote
View Public Profile Visit Digmen1's homepage!
 
Reply     « Reply to How to float text to the side of a pic ?
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.62513 seconds with 12 queries