CSS Float, margin issue

[progman1010]

here's the site where i'm having the problem:

http://taskmania.jaymunda.com/?tod=true

What I want to do is have the "Tip of the Day" in the bottom-right corner of the content area, with the text flowing around the box. Any ideas how to fix?

 

[traingamer]

Maybe float the holding div to the right instead of the left?
Then add some text to test it.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[progman1010]

did i say bottom-right? ha! i meant bottom-left.

 

[traingamer]

In any case, put in some test text to float around the box. Depending on where your text goes (and I can't really guess that), it may work as is.

The key concept here is float.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[progman1010]

well, there's text in there now, but IE thinks it should float around where the box used to be. and in FF, same thing, but then when you scroll, the TIP box scrolls with the page and it shouldn't.

 

[traingamer]

My mistake. I missed the relative positioning, combined with the float. You're trying to position the 'Tip of the Day' at the bottom of your content and float text around it, yes?

I don't know any way to do what you're asking. (Someone else here may.)

If the position doesn't have to be at the bottom, you can include some text, then your left floated div, then some more text, but I suspect you already knew that. i.e. remove the relative positioning.

As for the scrolls with the page 'problem', your relative positioning tells the browser to keep the Tip div 298px from the top of the scroll window. It's doing that as specified.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill