Embedding Javascript in Content or Block Causes Misalignment of Regions / Overflow

Question

When embedding Javascript, the content area seems to "overflow" past its container. I am pasting an example of how embedding Tweets can cause this problem. The content shouldn't be extending into the dark green area.

I am new to Drupal, but have basic web programming experience. Should I be looking at CSS rules for this? Could it be a quirk with a theme setting? Many thanks for any leads!

For reference, right now Tweets are being embedded by pasting this code block into the content (with Full HTML enabled):

<blockquote class="twitter-tweet" lang="en">
<p>TEXT & SUCH FROM TWITTER</p></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Note that I intentionally pasted the same tweet twice so that it would better illustrate the problem.

Edit: Interestingly, the problem seems to resolve itself if I press "alt" while in Chrome or Firefox. The page seems to re-render slightly, filling in white space on the right. Perhaps this is because CSS is usually executed before JavaScript when rendering pages? I noticed this after bring up the inspector tool, which seemed to fix the problem.

Answer 1

Yes, CSS is the way to go with this. I had a similar problem with a twitter feed in a block. Using Chrome developer tools, I just targeted the twitter content without making adjustments to the block.

You definitely don't want to mess with the JavaScript if there isn't an option in your script tag.