<div>
Charles! Long-time no-see, sir.<br />
<br />
I am on an iPad at the moment and can't do a mockup but I can do one in a few hours. &nbsp;Eyeballing it, I can see a widget will probably fit there but it might be a bit on the narrow side.
</div>


<div>
Here's a quick mockup:<br />
<br />
<a href="https://filedb.experts-exchange.com/incoming/2014/11_w47/884262/Smart-Growth-Analytics--Powerful-and-pra" target="_blank" title="Mockup (1.9 MB)"><img alt="Mockup" class="file-block lazyload" style="max-width: 800px;" data-src="https://filedb.experts-exchange.com/incoming/2014/11_w47/800_884262/Smart-Growth-Analytics--Powerful-and-pra" /></a>
</div>


Smart-Growth-Analytics--Powerful-and-pra

<div>
That, my dear sir, is brilliant! Would you be so kind as to<br />
<br />
a. post the code (suitably obfuscated as necessary) that you used to create the feed?<br />
b. show me the exact location for insert?
</div>


<div>
And another with reduced widget height (first was 600px, this one is 400px)<br />
<br />
<a href="https://filedb.experts-exchange.com/incoming/2014/11_w47/884265/Smart-Growth-Analytics--Powerful-and-pra" target="_blank" title="Resized (1.8 MB)"><img alt="Resized" class="file-block lazyload" style="max-width: 800px;" data-src="https://filedb.experts-exchange.com/incoming/2014/11_w47/800_884265/Smart-Growth-Analytics--Powerful-and-pra" /></a>
</div>


<div>
So the code simply comes from the Twitter Widget Generator. &nbsp;Login to your Twitter account, go to Settings. &nbsp;On the menu on the left, the last item is Widgets. &nbsp;Click it, then click &quot;Create New Widget&quot; when you see it.<br />
<br />
I've attached a screenshot of the settings I used:<br />
<br />
<a href="https://filedb.experts-exchange.com/incoming/2014/11_w47/884266/Widgets-Configurator.png" target="_blank" title="Jason's Widget (206 KB)"><img alt="Jason's Widget" class="file-block lazyload" style="max-width: 800px;" data-src="https://filedb.experts-exchange.com/incoming/2014/11_w47/800_884266/Widgets-Configurator.png" /></a><br />
Once you create the Widget (and you can do so with your account, a search, someone else's account e.g. CNN or a hashtag) and save it, Twitter gives you some code to copy/paste into your site. &nbsp;From the above, this is it:<br />
<br />

<pre><code class="code-1 nolinks" id="code-20-40455941-1"><span>&lt;a class=&quot;twitter-timeline&quot; data-dnt=&quot;true&quot; href=&quot;https://twitter.com/CNN&quot; data-widget-id=&quot;535506810950545408&quot;&gt;Tweets by @CNN&lt;/a&gt;</span>
<span>&lt;script&gt;!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+&quot;://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);&lt;/script&gt;</span>
</code></pre>
<br />
Just stick the generated code where you want the widget to appear. &nbsp;In your case, I stuck it right after the closing &lt;p&gt; tag of this paragraph:<br />
<br />

<blockquote>
We provide economic intelligence to inform business plans of both the Private Sector and the Public Sector, including planning activities of economic development organisations. We provide Regional Growth Fund support, Core Strategy development and Inward Investment Support. more
</blockquote>
<br />
and removed the scripts that were there as I think they are unnecessary.
</div>


Widgets-Configurator.png

<div>
Funny thing is, i did that on a test page and it decimated the page layout. I suppose i could have made a bit of a blunder
</div>


<div>
It shouldn't do anything to layout UNLESS you don't have good CSS controlling div widths. &nbsp;The twitter widgets expand to fill any available width so as long as it appears inside of a well-defined div, you shouldn't have problems with it.
</div>


<div>
Well i'm puzzled now, as surely the CSS of the site in question was in force on your mockup?
</div>


<div>
Yes, but I have a feeling you put the code in the wrong place.
</div>


<div>
What i'm getting at is that i'll be using the same CSS as you, won't i?<br />
<br />
Did you by any chance remove some scripts before you pasted it?
</div>


<div>
Yup, check out this horror - it <i>appears</i> to be in the right place<br />
<br />
<a href="http://www.smartgrowthanalytics.co.uk/index-test.html" rel="ugc">http://www.smartgrowthanalytics.co.uk/index-test.html</a>
</div>


<div>
Your code is different from mine....<br />
<br />

<pre><code class="code-1 nolinks" id="code-20-40456558-1"><span>&lt;!-- Twitter --&gt; </span>
<span>&lt;iframe title=&quot;Twitter Timeline&quot; style=&quot;border: medium none; max-width: 100%; min-width: 180px; width: 220px;&quot; allowfullscreen=&quot;&quot; class=&quot;twitter-timeline twitter-timeline-rendered&quot; allowtransparency=&quot;true&quot; scrolling=&quot;no&quot; id=&quot;twitter-widget-0&quot; frameborder=&quot;0&quot; height=&quot;600&quot;&gt;&lt;/iframe&gt;</span>
<span>&lt;script&gt;// &lt;![CDATA[</span>
<span>!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+&quot;://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</span>
<span>// ]]&gt;&lt;/script&gt;</span>
<span>&lt;!-- end Twitter --&gt;</span>
</code></pre>
<br />
You're using an iframe and that's what is throwing things off. &nbsp;Where did you get that code from?
</div>


<div>
Jason, i think the js is replacing nodes in the document as this is what i was given and inserted:<br />
<br />

<pre><code class="code-1 nolinks" id="code-20-40456894-1"><span>&lt;a class=&quot;twitter-timeline&quot; href=&quot;https://twitter.com/XXXX&quot; data-widget-id=&quot;535206678560772097&quot;&gt;Tweets by @XXXX&lt;/a&gt;</span>
<span>&lt;script&gt;// &lt;![CDATA[</span>
<span>!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+&quot;://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</span>
<span>// ]]&gt;&lt;/script&gt;</span>
</code></pre>
<br />
(i've slightly obfuscated there so as not to cause search noise)
</div>


<div>
Sorry Jason - no dice. As you can see, i put in the data-dnt attribute, but i'm afraid the CDATA is simply reinserted after i remove it<br />
<br />
<a href="http://www.smartgrowthanalytics.co.uk/index-test.html" rel="ugc">http://www.smartgrowthanalytics.co.uk/index-test.html</a><br />
<br />
is still well and truly skew-whiff
</div>


<div>
And if you take all of the Twitter code out, the ul's realign properly?
</div>


<div>
Jason - we might be getting somewhere - though i don't know where ;)<br />
<br />
I thought i might have malformed html (you'll have to forgive me - i'm working in a control panel that has no indentation whatsoever and the server removes indentation)<br />
<br />
I pasted the source into an editor then copied and saved it then ran Tidy on it to validate and indent. Then i copied and pasted back into the site page. It's still skew-whiff with the Twitter code <i>removed</i> (!) There's something wrong, but i don't know what<br />
You can confirm the page is wonky perhaps?
</div>


<div>
I think you may have some missing closing &lt;/div&gt; tags in the upper part of the document and that's throwing it off but it's such a complicated mess of nested divs I'm having a hard time seeing it.<br />
<br />
Can you roll back to known-good state?
</div>


<div>
Well index.html is that good state actually
</div>


<div>
Okay, from that page I see:<br />
<br />

<pre><code class="code-10 nolinks" id="code-20-40468447-1"><span>				&lt;div class=&quot;col-220&quot;&gt;</span>
<span>					&lt;h3&gt;&lt;cufon style=&quot;width: 38px; height: 18px;&quot; alt=&quot;Our &quot; class=&quot;cufon cufon-canvas&quot;&gt;&lt;canvas style=&quot;width: 57px; height: 20px; top: -3px; left: -2px;&quot; height=&quot;20&quot; width=&quot;57&quot;&gt;&lt;/canvas&gt;&lt;cufontext&gt;Our &lt;/cufontext&gt;&lt;/cufon&gt;&lt;cufon style=&quot;width: 55px; height: 18px;&quot; alt=&quot;clients&quot; class=&quot;cufon cufon-canvas&quot;&gt;&lt;canvas style=&quot;width: 71px; height: 20px; top: -3px; left: -2px;&quot; height=&quot;20&quot; width=&quot;71&quot;&gt;&lt;/canvas&gt;&lt;cufontext&gt;clients&lt;/cufontext&gt;&lt;/cufon&gt;&lt;/h3&gt; &lt;br&gt;</span>
<span></span>
<span>					&lt;p&gt;We provide economic intelligence to inform business plans of both the Private Sector and the Public Sector, including planning activities of economic development organisations. We provide Regional Growth Fund support, Core Strategy development and Inward Investment Support. &lt;a href=&quot;about.html&quot;&gt;more&lt;/a&gt;&lt;/p&gt;</span>
<span></span>
<span>&lt;script charset=&quot;utf-8&quot; src=&quot;http://widgets.twimg.com/j/2/widget.js&quot;&gt;&lt;/script&gt;</span>
<span>&lt;script&gt;</span>
<span>new TWTR.Widget({</span>
<span>  version: 2,</span>
<span>  type: 'profile',</span>
<span>  rpp: 4,</span>
<span>  interval: 15000,</span>
<span>  width: 'auto',</span>
<span>  height: 320,</span>
<span>  theme: {</span>
<span>    shell: {</span>
<span>      background: '#ffffff',</span>
<span>      color: '#346699'</span>
<span>    },</span>
<span>    tweets: {</span>
<span>      background: '#ffffff',</span>
<span>      color: '#000000',</span>
<span>      links: '#346699'</span>
<span>    }</span>
<span>  },</span>
<span>  features: {</span>
<span>    scrollbar: false,</span>
<span>    loop: true,</span>
<span>    live: true,</span>
<span>    behavior: 'default'</span>
<span>  }</span>
<span>}).render().setUser('growthanalytics').start();</span>
<span>&lt;/script&gt;</span>
<span></span>
<span>				&lt;/div&gt;&lt;!-- end .col-220 --&gt; 				</span>
</code></pre>
<br />
Delete the scripts after the end of the paragraph, add the Twitter embed code:<br />
<br />

<pre><code class="code-1 nolinks" id="code-20-40468447-2"><span>				&lt;div class=&quot;col-220&quot;&gt;</span>
<span>					&lt;h3&gt;&lt;cufon style=&quot;width: 38px; height: 18px;&quot; alt=&quot;Our &quot; class=&quot;cufon cufon-canvas&quot;&gt;&lt;canvas style=&quot;width: 57px; height: 20px; top: -3px; left: -2px;&quot; height=&quot;20&quot; width=&quot;57&quot;&gt;&lt;/canvas&gt;&lt;cufontext&gt;Our &lt;/cufontext&gt;&lt;/cufon&gt;&lt;cufon style=&quot;width: 55px; height: 18px;&quot; alt=&quot;clients&quot; class=&quot;cufon cufon-canvas&quot;&gt;&lt;canvas style=&quot;width: 71px; height: 20px; top: -3px; left: -2px;&quot; height=&quot;20&quot; width=&quot;71&quot;&gt;&lt;/canvas&gt;&lt;cufontext&gt;clients&lt;/cufontext&gt;&lt;/cufon&gt;&lt;/h3&gt; &lt;br&gt;</span>
<span></span>
<span>					&lt;p&gt;We provide economic intelligence to inform business plans of both the Private Sector and the Public Sector, including planning activities of economic development organisations. We provide Regional Growth Fund support, Core Strategy development and Inward Investment Support. &lt;a href=&quot;about.html&quot;&gt;more&lt;/a&gt;&lt;/p&gt;</span>
<span></span>
<span>&lt;a class=&quot;twitter-timeline&quot; data-dnt=&quot;true&quot; href=&quot;https://twitter.com/CNN&quot; data-widget-id=&quot;535506810950545408&quot;&gt;Tweets by @CNN&lt;/a&gt;</span>
<span>&lt;script&gt;!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+&quot;://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);&lt;/script&gt;</span>
<span>				&lt;/div&gt;&lt;!-- end .col-220 --&gt; 	</span>
</code></pre>
<br />
The cufon stuff probably won't appear in the actual source code as that's re-rendered via something else. &nbsp;Included to show the parent div. &nbsp;If you do just that, you should be okay.
</div>


<div>
<a href="http://www.smartgrowthanalytics.co.uk/index-test.html" rel="ugc">http://www.smartgrowthanalytics.co.uk/index-test.html</a><br />
is the result - still borked<br />
<br />
Of course, it doesn't help that this site, as you say, is a mass of nested divs. I suspect it was created by a machine
</div>


<div>
I've requested that this question be closed as follows:<br />
<br />
Accepted answer: 500 points for Jason C. Levine's comment <a href="https://www.experts-exchange.com/questions/28566102/Twitter-list.html?anchorAnswerId=40468447#a40468447" rel="ugc">#a40468447</a><br />
<br />
for the following reason:<br />
<br />
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
</div>


<div>
Nope - i'm still waiting for the results of testing from Jason
</div>


<div>
You never mailed me the original file :)
</div>


<div>
Actually i sent it on the first of December Jason - sent (forwarded) again
</div>


<div>
My fault, I didn't check spam folders. This question will resume.
</div>


<div>
Yes, that's good (just responding to EE reminder)
</div>


<div>
<div class="content wysiwyg-content">
Do you think it would be feasible to insert a Twitter listing in the leftmost column of the homepage at the bottom where there's free space here at <a href="http://www.smartgrowthanalytics.co.uk/index.html" rel="ugc">http://www.smartgrowthanalytics.co.uk/index.html</a>&nbsp;without putting the page layout out of whack?<br />
<br />
Ideally what i'd like is a demo, someone having used their browser dev tools to do a proof of concept plus taking a screenshot of the temporary result.
</div>
</div>


Do you think it would be feasible to insert a Twitter listing in the leftmost column of the homepage at the bottom where there's free space here at http://www.smartgrowthanalytics.co.uk/index.html without putting the page layout out of whack?

Ideally what i'd like is a demo, someone having used their browser dev tools to do a proof of concept plus taking a screenshot of the temporary result.

Twitter list

Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets". Users can group posts together by topic or type by use of hashtags – words or phrases prefixed with a "#" sign. Similarly, the "@" sign followed by a username is used for mentioning or replying to other users. Users access Twitter through the website interface, SMS, or mobile device app. The Twitter Web interface uses the Ruby on Rails framework. The service's application programming interface (API) allows other web services and applications to integrate with Twitter.

Twitter

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.