Image Float - Text Wrapping

mattgaunt

mattgaunt

mattgaunt

Associate
Joined
20 May 2007
Posts
441
Hey everyone,

I think I may be asking for a bit much here, not sure, but basically I have use this technique to get a footer at the bottom of the page at all times http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page and it worked pretty well.

But I wan a rss icon on the bottom right, now the closest I've gotten to achieving this is by putting it inside the footer, floating right and then setting a negative padding. This works and looks how I want but if you minimise the browser the flower moves into the text which is fine, but I want the text to wrap around the image, not go through it.

Does anyone have any ideas how I might achieve what Im trying to do?

http://www.gauntface.co.uk/index_OcUK.html

Cheers
 
Is this just un-achievable? I realise I'm asking for a lot in terms of a sticky footer plus something on top of the that and then add text wrapping.

But if anyone has any ideas at all please please do voice them and Ill try and make it work.

Im just a bit stumped at the moment is all
 
The way you've done things certainly isn't... ideal... but here goes.

- give your .pageContent overflow: hidden.
- Move your image to be just before the second last paragraph (before the <p>, not in it)
- Remove all CSS from the image other than float: right.
- Adjust a few px as necessary.

The pain here is that you will always need to put the image in where it needs to appear on each page. It has to remain in the pageflow in order to affect other elements in the flow (the text). This means you cannot absolutely position it to where it needs to go because then you'll have removed it from the flow.
 
Cheers for the reply tripnologist.

I gave it a go and got it working like you suggested but it will break far to easy.

Can you suggest to me anyway of achieving this even if I have to set the page content a min height and remove the CSS keeping the footer always at the bottom of the page.

I know I still got a lot to learn about CSS coding etc.
 
Sorry mate, that's the closest you're going to get because a floated element always has to come before the content that's to wrap around it and there is no way around it.

You may be able to find some sort of dynamic solution which could drop in the image where it needs to be, but that's not really a good idea imo.

Also, google 'sandbag divs', you may be able to alter the technique some to do what you want. Personally, I'd just change the design as it's not worth the hassle.
 
You must log in or register to reply here.
Back
Top Bottom