SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Apr 2, 2008, 13:18 #1
- Join Date
- Feb 2003
- Location
- Florida, USA
- Posts
- 2,322
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Getting an image to float correctly
Please see the attached image. The image is red. The paragraph is blue (has some padding). I'm looking for the image staying there as the text in the paragraph continues downward (note that the paragraph text does not move to the beginning of the line once it is clear of the image) It stays flush to the right of the image.
-
Apr 2, 2008, 13:48 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
If you place the image in its own container such as a p element and then give it a class that floats it left. You can then just add a margin-left to the other content that is wider than the image.
There is an old example here : (except that I would have preferred to put the image in a p element also just to keep it tidy).
http://www.pmob.co.uk/temp/nowrap.htm
However that will give the three pixel jog in IE6 when the text is lower than the height of the image.
A more advanced way is to utilise "haslayout" for IE and overflow for other browsers and you end up with a demo like this.
http://www.pmob.co.uk/temp/gallery-imageclear.htm
Hope that helps
-
Apr 3, 2008, 10:13 #3
- Join Date
- Feb 2003
- Location
- Florida, USA
- Posts
- 2,322
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
As, always, it worked flawlessly in FF, but I think I'm missing something in IE. IE's text is aligned perfectly except that there is about a line's worth of space that keeps the text's top from being flush with the top of the image.
Lookin over my code. Thanks for the post.
-
Apr 3, 2008, 10:25 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Check the default top margins of the elements you are using. Firefox usually has a default of 1 em to most elements like paragraphs but IE only has a bottom margin by default.
Make them both the same.
It may be another issue but without seeing it's hard to guess
Bookmarks