Topic: Floater thingamajig... (Page 1 of 1)

I'm working on a portfolio page for a friend of mine and she has this idea for her page:

http://www.11oh1.net/fc/frankwebbigidea.jpg

I've coded the basics of the page but now what I'm chewing on is how to get the little boy on the right hand side to float around. What I'd like him to do is float along the right side of the page as the browser window expands. Would a floating div work for this or am I going to have to use some JS? I'd like to use a floating div if I could but I don't know if that would work since it would have to span two divs height-wise along the page.

http://www.11oh1.net/fc/newmain.html

There's the page so far. So what do you all think? JS or would a floating div work?

:::11oh1:::

The boy is easy to place with absolute positioning - it's the bottom thing he's attached to that might cause issue. Did you want that fixed at the bottom right corner of the viewport, or the bottom right corner of the page (like when there's overflow)...I'm thinking the latter.

I don't get if you want the boy and the panel tied to him to #1 remain at the same position on the screen even if/when there is a scroll bar, or if you them to #2 simply be at the same position in the document

#1 Just set the boy in position:fixed; and fallback to #2 + some JavaScript thingamajic in the crappy browser(s)

#2 As reisio said, use position:absolute;, and if need be remember that there's more than the top and left properties, you can use the right and bottom properties to position an element

If you just make sure the bottom thing doesn't have to push the text aside (just put a space high enough at the bottom of the text area), then it can all be done with just simple absolute positioning.