CSS Relative Positioning Not Working

Question

For some reason I cannot get my image to position to the right of the Twitter feed. I positioned it relatively within the DIV tags of the twitter feed, but it remains below. Here is the live link: http://www.lymemd.org/indexmm6.php

My CSS:

#twitterfeed {
    position: relative;
}

#drshow {
    position: relative;
    left: 200px;
}

My HTML:

<div id="twitterfeed">
<a class="twitter-timeline" width="460" height="250"  href="https://twitter.com/Lyme_MD" 
data-widget-id="453198382664667137">Tweets by @Lyme_MD</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.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div id="drshow">
<img src="images/drshow.gif" alt="Diane Rehm Show Image" width="169" height="145">
</div>

</div>

Answer 1

Adding display:inline-block seems to fix it:

#drshow { position: relative; display:inline-block }

Answer 2

Why not use floats?

.twitter-timeline {
    float: left;
}

#bannerArea {
    clear: left;
}

Not sure if the #bannerArea is where you want to clear, but it's a start! One major advantage is that the layout will adjust if the visitor's screen is too narrow to display both horizontally. You can also apply the float to other major elements, and you don't need to worry about relative or absolute positioning.

Answer 3

If #twitterfeed is position:relative, #drshow must be position:absolute to achieve this.

#drshow {
    position: absolute;
    top: 0px;
    left: 30px;
}