SitePoint Sponsor |
|
User Tag List
Results 1 to 14 of 14
Thread: Wrap text around an image
Hybrid View
-
Jul 8, 2003, 04:58 #1
- Join Date
- Aug 2002
- Location
- N.Ireland
- Posts
- 1,046
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Wrap text around an image
Can someone tell me how, without using tables, I could have an image in a column to the left and text to the right of it which starts from the top and carries on underneath the image. Kinda like the left col of this page www.focused.ie/knowledge.htm except I want the text to carry on below the image.
-
Jul 8, 2003, 05:11 #2
- Join Date
- Apr 2002
- Location
- Salford / Manchester / UK
- Posts
- 4,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
you could just float the image to the left, surely ?
Code:CSS: .newsitem img { float: left; border: none; margin: 1em; } HTML: <div class="newsitem"> <img src="blah.jpg" alt="blah!" /> <p>and some text...if it's long enough, it will wander under the image...</p> </div>
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
WaSP Accessibility Task Force Member
splintered.co.uk | photographia.co.uk | redux.deviantart.com
-
Jul 8, 2003, 05:14 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
There are probably other ways to do this but why don't you just float the image left and then add a margin to the <p> tag containing the text that is bigger than the image, so that the text stays to the right of the image.
If you leave the margin out then the text will still start at the right of the image but will then wrap underneath the image.
Something like this :
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- .outer { color: #000000; background-color: #FFFFCC; height: 300px; width: 400px; } .outer img { float: left; } .outer p{ margin-left:100px; } --> </style> </head> <body> <div class="outer"><img src="images/circle.gif" alt="test image" width="90" height="90" /> <p>Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : Hello this is some text : </p> </div> </body> </html>
Paul
-
Jul 8, 2003, 05:50 #4
- Join Date
- Apr 2002
- Location
- Salford / Manchester / UK
- Posts
- 4,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
Originally Posted by Daz
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
WaSP Accessibility Task Force Member
splintered.co.uk | photographia.co.uk | redux.deviantart.com
-
Jul 8, 2003, 05:28 #5
- Join Date
- Aug 2002
- Location
- N.Ireland
- Posts
- 1,046
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks guys, I was floating the div block instead of the image, doh!
-
Jul 8, 2003, 06:47 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by redux
Which is why I provided both.
Hope I didn't confuse anyone.
Paul
-
Jul 8, 2003, 08:44 #7
- Join Date
- Apr 2002
- Location
- Salford / Manchester / UK
- Posts
- 4,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
nah...very valid point, paul. re-reading Daz's question, i'm actually not sure myself now
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
WaSP Accessibility Task Force Member
splintered.co.uk | photographia.co.uk | redux.deviantart.com
-
Jul 9, 2003, 00:42 #8
- Join Date
- Aug 2002
- Location
- N.Ireland
- Posts
- 1,046
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I wanted the text underneath
All was well with this solution until I added another div containing another pic and text. The column now shifts to the bottom of the page. Here's links to both pages to show what I mean
http://www.focused.ie/knowledge.htm - this is fine
http://www.focused.ie/knowledge2.htm - this isn't!
-
Jul 9, 2003, 02:01 #9
- Join Date
- Apr 2002
- Location
- Salford / Manchester / UK
- Posts
- 4,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Daz
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
WaSP Accessibility Task Force Member
splintered.co.uk | photographia.co.uk | redux.deviantart.com
-
Jul 9, 2003, 06:43 #10
- Join Date
- Aug 2002
- Location
- N.Ireland
- Posts
- 1,046
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanks redux, that's one problem solved but what I'm getting in IE is that the column drops to the bottom of the page, even when I fix the widths
-
Jul 9, 2003, 08:35 #11
- Join Date
- Apr 2002
- Location
- Salford / Manchester / UK
- Posts
- 4,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
you need to make sure that there's enough space left for your right-hand column - including any margins etc - to fit next to the left-hand column. i.e. jiggle around with the widths/margins. i'll have a crack at it later tonight, when i'm at home...as i'm not making much sense today
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
WaSP Accessibility Task Force Member
splintered.co.uk | photographia.co.uk | redux.deviantart.com
-
Jul 9, 2003, 09:33 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Redux is right the best solution would be to shorten the width on your valuable knowledge gif and then everything fits ok.
Otherwise you will need to shorten your left column to make room for the wider right column.
Something like this:
Code:#leftcol{ width: 450px; float: left; } #rightcol{ background-color: #eeeeee; margin-left: 475px; padding-left: 10px; width: 280px; border: 1px dashed #808080; padding-bottom: 15px; }
Hope this helps.
Paul
-
Jul 10, 2003, 00:19 #13
- Join Date
- Aug 2002
- Location
- N.Ireland
- Posts
- 1,046
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Paul and Redux, problem sorted.
-
Jul 10, 2003, 07:44 #14
- Join Date
- Aug 2002
- Location
- N.Ireland
- Posts
- 1,046
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ah bum, in Opera the image is floating outside of the right column a bit, why oh why?!
www.focused.ie/strategy.htm
Bookmarks