Create Div at Bottom of Body/Html, But Position at Particular Spot

HTML & CSS
1

Hi All,

Okay, I have a div layer that has social buttons in it. Unfortunately the social buttons sometimes stall, especially reddit, and I’m left waiting on a 3rd party site, with the page failing to load until the stall is over. So I’ve been creating a div layer at the bottom of the page, and then using javascript innerhtml, moving the information after the page loads to a div layer positioned elsewhere.

You can see the result here:

http://bit.ly/blh2GY

Let the page load all the way and you’ll spot the floating bar on the left hand side. It works fine, but requires extra coding and sometimes the javascript buttons inside don’t handle the move too well in some browsers.

I’m now just thinking of setting up the DIV layer on the bottom of the page and then moving it up (as an absolute) to that spot. But I don’t know how to perfect the positioning.

Is there a way I can have the Div align/corner to a specified point or anchor?

Trying to think of best way to get to that same position, but write the code at the bottom of the page.

All insight appreciated!

Ryan

2

This should work:


<div style="position:absolute; top: 0; width: 66px; right: 50&#37;;">
	<div style="position:relative; width:66px; top:274px; left: -488px; text-align:left; opacity:0;filter:alpha(opacity=0);" id="socialfloat">
	
	</div>
</div>

That can be placed at the end of your page, it should be perfect (or darn close) in firefox. I can’t guarantee those results though, as a copy paste page can sometimes be a little off.

All I’ve done here is place the socialfloat inside an absolutely positioned container to pull it to the top and align its right edge with the middle of the screen. From there, you relatively position the socialfloat from there.

I hope this helps!

3

Wow. That is pretty much perfect! I tested every browser and IE down to version 7. I might need to see it in 6 (probably just disable it for 6), but all those work great. IE7 places it a few pixels higher than the rest, but up and down doesn’t matter in terms of placement.

Works great. Thanks again

Ryan

4

Thanks for the advice!

So far still good, but haven’t done all the cross-browser testing yet.

Cheers!
Ryan