CODEWITHSUNDEEP
htmlcsscss-position
Eric
Eric

Reputation: 315

CSS Relative Positioning Not Working

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>

Upvotes: 8

Views: 26808

Answers (3)

potashin
potashin

Reputation: 44581

Adding display:inline-block seems to fix it:

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

Upvotes: 4

ramesh
ramesh

Reputation: 2477

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

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

Upvotes: 3

Sunny Patel
Sunny Patel

Reputation: 8077

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.

Upvotes: 2

Related Questions