Question

I downloaded JavaScript code from http://twitter.com to embedded a Twitter Widget in a block on the front page of this site: http://www.fareham.vm.bytemark.co.uk/.

The block renders fine in Google Chrome (10.0.648.133) and Opera (11.01), but in Internet Explorer (7.0.5730.13CO) and Firefox (3.6.15), the block is rendered incorrectly, obscuring the latest news block.

The CSS code is loaded from: http://widgets.twimg.com/j/2/widget.css:

.twtr-widget {
    position:relative;
    font-size:12px!important;
    font-family:"lucida grande",lucida,tahoma,helvetica,arial,sans-serif!important;
    zoom:1;
}
.twtr-fullscreen {
    font-size:220%!important;
}
.twtr-fullscreen .twtr-new-results {
    _display:none!important;
}
.twtr-inactive {
    display:none;
}
.twtr-widget a img {
    border:0!important;
}
.twtr-doc {
    overflow:hidden;
    width:100%;
    text-align:left;
    font-weight:normal;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.twtr-bd {
    padding:0 1px;
}
.twtr-widget .twtr-tweet-wrap {
    padding:6px 8px;
    overflow:hidden;
    zoom:1;
}
.twtr-fullscreen .twtr-tweet-wrap {
    padding:20px;
}
.twtr-widget .twtr-tweet {
    border-bottom:1px dotted #ddd;
    overflow:hidden;
    zoom:1;
}
.twtr-widget-profile img.twtr-profile-img {
    display:block;
    float:left;
    width:31px;
    height:31px;
    border:0!important;
}
.twtr-widget h3,.twtr-widget h4,.twtr-widget p {
    margin:0!important;
    padding:0!important;
    line-height:1.2!important;
    width:auto!important;
}
.twtr-widget-profile h3,.twtr-widget-profile h4 {
    margin:0 0 0 40px!important;
}
.twtr-widget h3 {
    font-size:11px!important;
    font-weight:normal!important;
}
.twtr-widget h4 {
    font-size:16px!important;
}
.twtr-widget em,.twtr-widget .twtr-new-results {
    font-size:9px;
    font-style:normal;
    display:block;
    margin-top:2px;zoom:1;
}
.twtr-widget .twtr-new-results {
    text-align:center;
    padding:3px;
    margin:0 auto -10px auto!important;
    display:block;
    position:relative;
    bottom:5px;
    line-height:.9;
}
.twtr-results-inner {
    line-height:1;
    font-size:100%;
    padding:4px 0;
    position:relative;
    bottom:-2px;
    width:40%;
    margin:0 auto;
    z-index:2;
    text-align:center;
}
.twtr-results-hr {
    width:100%;
    position:relative;
    z-index:1;
    height:1px;
    border-bottom:1px dotted #ddd;
    bottom:7px;
    background:none;
    overflow:hidden;
}
.twtr-new-results span {
    position:relative;
    z-index:3;
    top:-14px;
    display:block;
    font-size:9px!important;
}
.twtr-fullscreen .twtr-new-results span {
    font-size:24px!important;
}
.twtr-hd {
    padding:10px;
    position:relative;
    zoom:1;
    overflow:hidden;
}
.twtr-fullscreen .twtr-hd {
    height:0;
    padding:0;
}
.twtr-timeline {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    position:relative;
    overflow:hidden;
    z-index:2;
    height:225px;
}
.twtr-scroll .twtr-timeline {
    overflow-x:hidden;
    overflow-y:auto;
}
.twtr-widget .twtr-tweet:last-child {
    border-bottom-width:0;
}
.twtr-ft {
    position:relative;
}
.twtr-ft div {
    overflow:hidden;
    padding:10px;zoom:1;
}
.twtr-ft span {
    float:right;text-align:right;
}
.twtr-ft a {
    float:left;display:block;
}
.twtr-ft a img {
    position:relative;
    top:2px;
}
.twtr-ft span a {
    float:none;
}
.twtr-avatar {
    width:40px;
    height:40px;
    float:left;
    overflow:hidden;
    display:block;
}
.twtr-fullscreen .twtr-avatar {
    width:80px;
    height:80px;
}
.twtr-img {
    height:25px;
    width:25px;
}
.twtr-img img {
    width:30px;
    height:30px;
}
.twtr-fullscreen .twtr-img img {
    width:72px;
    height:72px;
}
.twtr-fullscreen a.twtr-join-conv {
    display:none;
}
.twtr-tweet-text {
    margin-left:40px;
}
.twtr-fullscreen .twtr-tweet-text {
    margin-left:90px;
}
.twtr-popular {
    font-size:10px;
    padding:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    display:inline-block;
    margin-top:3px;
    opacity:.8;
}
.twtr-doc a {
    text-decoration:none!important;
}
.twtr-doc a:hover {
    text-decoration:underline!important;
}

Answer 1

First of all your problem has nothing to do with positioning.

Your <h2> element which come just before the twitter feed…

<h2>Twitter Timeline</h2>

… is being affected by the following CSS rule: (demo.css, line 10)

.promo-center-2cols .block h2 {
    float:left;
    width:320px
}

Drop the float:left. The problem is that there is a div shortly after it… (class="twtr-doc")

<h2>Twitter Timeline</h2>
<div class="content">
    <div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
        <div class="twtr-doc" style="width:100%;">

… which is being targeted by the following rule: (widget.css line 12)

.twtr-doc {
    overflow:hidden;
    width:100%;text-align:left;
    font-weight:normal;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

That float and overflow together are creating your problem. You’ll have to change one of them, and since widget.css comes from widgets.twimg.com (Twitter) I assume you can’t change it, so change the float value in demo.css.