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>

potashin · Accepted Answer · 2017-02-14T14:08:55.193

4

Adding display:inline-block seems to fix it:

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

edited Feb 14 '17 at 14:08

answered Apr 07 '14 at 23:04

potashin

44,205
11
83
107

1

That did it, thanks. Do you know why it needed that? Very new to CSS and it's not too clear why it needed the display "inline" property to change it. What does it mean? – Eric Apr 07 '14 at 23:07
2

Just want to answer Eric's comment. Block elements always start on a new line and take up the whole width, (see https://www.w3schools.com/html/html_blocks.asp). Inline-block elements do not start a newline and allow elements on either side of them. See https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block – bluesixty Sep 10 '17 at 19:05

score 2 · Answer 2 · answered Apr 07 '14 at 23:04

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.

answered Apr 07 '14 at 23:04

Sunny Patel

7,830
2
31
46

Thank you for your answer. I think floats is the correct way to go. However, now I'm here: http://www.lymemd.org/indexmm6.php How do I go about positioning the audio player beneath the image and centering them both to the right of the twitter feed? Do I need to make DIVs for everything? Thank you for you help in advance!! – Eric Apr 07 '14 at 23:24
To start yes, you can encapsulate the player and image into a single div (Which you have as `#drshow` already). On that div, you would apply `text-align: center;`, and in the HTML, I would add a `
` after the image. However, **if** the image height becomes higher than the height of the twitter feed, the player will center on the page, and not be directly under the image. – Sunny Patel Apr 07 '14 at 23:37
Thanks for your help, that worked! Now my next step will be splitting up that whole #BannerArea into two separate sections...not sure how simple that will prove. – Eric Apr 08 '14 at 01:10

score 2 · Answer 3 · answered Apr 07 '14 at 23:08

2

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

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

answered Apr 07 '14 at 23:08

ramesh

2,296
4
19
29

CSS Relative Positioning Not Working

3 Answers3

Linked