Twitter widget stuck in upper left corner


Hello. I’m using CSS to format a site. I’d like the twitter feed to be positioned basically in the middle of the page. No matter what code I add, the widget is stuck above another widget on the page. I’m rather confused why.

Here’s the CCS code:

.twitter-timeline {
   position: absolute
   left: 550px;
   top: 300px;
   height: 200;

and the widget:

<div class="twitter-timeline" 'href="" data-widget-id="678692419626401792">Tweets by @BradNoeMusic</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+"://";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>         

Anything obvious you can see?

I haven’t published the page yet, but intend to soon.

thanks for your help.


I see the widget code didn’t post. When I get the page up, I’ll post the link.



You need to use the code markup to make the code visible (either use the </> in the editor, or surround the code blocks with backticks) - I fixed that for you.


Hi Pamela,

Best guess here is just that you need to set the z-index of your widgets appropriately to get the stacking you want: Try z-index: 10 on the .twitter-timline selector, and z-index: 20 on the widget you want to appear over it.

(Also, note that you’re missing px units on your width/height in the example above, that will result in the widget appearing at its default 520px/600px dimensions.)

Hope that helps,