trouble aligning div side by side

Question

I'm trying to get the shoutbox on www.talkjesus.com (vBulletin forum) to float left while the verse of the day (orange) to float on the very right side of the shoutbox. I've tried so many variations but it's not working, I'm stuck. Your help appreciated.

The forumhome template code I'm using now is:

    <div class="blockbody formcontrols floatcontainer">

    <div id="wgo_onlineusers" class="wgo_subblock">
                    <h3 class="blocksubhead" style="background-color:#82BA1B; color: #fff !important; font-size: 22px; font-weight: 300">shoutbox</h3>
        <div style="text-align: center; line-height: 0" class="blockrow">
        <div><iframe frameborder="0" width="100%" height="200" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain1-439"" id="cboxmain1-439" style="border-bottom: 1px solid #e4e4e4;"></iframe></div>
        <div style="position:relative"><iframe frameborder="0" width="350" height="70" src="http://www.cbox.ws/box/?boxid=439&amp;boxtag=7868&sec=form&nme={vb:raw cboxnme}&nmekey={vb:raw cboxkey}&pic={vb:raw cboxav}&lnk={vb:raw cboxav}" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform1-439" id="cboxform1-439"></iframe></div>
        </div>
    </div>
    </div>

    <br />

    <div class="blockbody formcontrols floatcontainer">
    <div id="wgo_onlineusers" class="wgo_subblock">
    <h3 class="blocksubhead" style="background-color:#E66B1B; color: #fff !important; font-size: 22px; font-weight: 300">verse of the day</h3>
    <div>
    <div style="font-size:16px; line-height:28px; padding:10px; color: #797979">
    <script type="text/javascript" src="http://www.christnotes.org/syndicate.php?content=dbv&amp;type=js2&amp;tw=auto&amp;tbg=ffffff&amp;bw=0&amp;bc=000000&amp;ta=L&amp;tc=43A6DF&amp;tf=Open Sans&amp;ts=14&amp;ty=B&amp;va=L&amp;vc=43A6DF&amp;vf=Open Sans&amp;vs=12&amp;tt=3&amp;trn=NASB"></script>
    </div>
    </div>
    </div>
    </div>

relevant CSS code...

    /* Auto-clearing of floats */
    .floatcontainer:after,
    .formcontrols .blockrow:after,
    dl.stats:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .floatcontainer,
    .formcontrols .blockrow,
    dl.stats {
        display:inline-block;
        font-weight:normal;
    }
    /* IE-Mac hide \*/
    * html .floatcontainer,
    .formcontrols .blockrow,
    dl.stats {
        height:1%;
    }
    .floatcontainer,
    .formcontrols .blockrow,
    dl.stats {
        display:block;
    }


    .blockrow {
        padding:12px;
    }


    .blocksubhead {
        padding:12px;
    }


    .blockhead_info, .blocksubhead_info {
        float:right;
        font-weight:normal;
    }

Answer 1

Have you tried applying the float property to the .floatcontainer element?

.floatcontainer {
    width: 50%;
    float: left;
}

Setting the width property will be necessary here because the output of the script in the second .floatcontainer block adds a div element to the document which has a width of 100%. Take a look at the output here: http://goo.gl/Bw7iaD (see inline styles of first element). This makes the verse box span full-width unless it's parent container has a specified width.

Here is an example of the working code: http://cdpn.io/0dfce502ffdc99f54a159f7a563ed4fe