Floating Effect

Greetings,

I am writing regarding an awesome tutorial - http://jqueryfordesigners.com/fixed-floating-elements/.

I've been trying to apply this effect to the twitter feed on my website (http://philipos.com) but unfortunately, I haven't quite gotten it.

I have the following in the header...

<style>
/* required to avoid jumping */
#twitterfeed {
left: 13px;
position: absolute;
margin-left: 0px;
width: 220px;
}

#twitter {
position: absolute;
top: 0;
/* just used to show how to include the margin in the effect */
margin-top: 0px;
border-top: 0px solid purple;
padding-top: 0px;
}

#twitter.fixed {
position: fixed;
top: 0;
}
</style>


...and the following in the body...


<div id="twitterfeed">
<div id="twitter">
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 6000,
width: 220,

height: 250,
theme: {
shell: {
background: '#a30000',
color: '#cfcfcf'
},
tweets: {
background: '#e6e6e6',
color: '#423542',
links: '#9c0e0e'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: false,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('pysolomon').start();
</script>
</div>
</div>

...but no luck.

Also, if you zoom out, the Twitter feed remains along the left edge of the screen (http://philipos.com/Stuff.html). How do I make it so that it remains relatively centered along the side of a body of text, as in the home page?


Thank you for your help!


Philip