struggling to get divs to line up next to each other

Can anyone help me with aligning the shoutbox on www.talkjesus.com (vBulletin forum) to float left while the verse of the day (orange) floats on the right side of the shoutbox? I've tried various combinations but nothing seems to work. Your assistance would be greatly appreciated.

The current forumhome template code I'm using 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>

CSS code related to alignment...

    /* 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

Did you consider using the float property on the .floatcontainer element?

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

It's important to set the width property in this case because when the script generates a div element in the second .floatcontainer block, it defaults to a width of 100%. You can see an example of this behavior in the output here: (check out the inline styles of the first element). This causes the verse box to expand to full-width unless its parent container has a defined width.

For reference, take a look at this example with functional code:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The incorrect display of right-to-left text is indicated by a number followed by a dash and

Help needed with code <p> Code Help 01-01-1034-100100 </p> The output is currently displaying the number right to left (با کدنوسازی 01-01-1034-100100). I want it to display as 01-0 ...

Add a circular transition effect to Font Awesome icons

Check out my code snippet on JSFIDDLE: https://jsfiddle.net/8f3vLh0a/14/ I am using font awesome icons and I would like to add a circling effect on hover similar to this demo: http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/ How can I implement t ...

Ensure that the column remains positioned to the right side of the page (float-right)

https://i.sstatic.net/TBjL6.png I am facing an issue with a three-column layout in one row. Each column is lg-6, but the last column ends up below the other two columns when there is more content in Column 2 than Column 1. The last column (Column 3) is flo ...

Switch out HTML tags depending on attribute content

In my current project, I am looking to replace all instances of the vanilla <a> tag with a different tag (<router-link>). The challenge lies in applying certain conditions based on the value of the href attribute (for example, it should ignore ...

Animation event in CSS3 fails to trigger on Firefox browser

Exploring the potential of CSS3 animation to detect when an input transitions from the enable to disable state, I encountered a challenge specifically in Firefox. Here is the code snippet that showcases the issue: View Demo on jsFiddle HTML: <input t ...

Circular JQuery carousel tracking

I am struggling to figure out how to create a looping effect for the images inside the slider. I would like the track to seamlessly loop around from both sides after they are hidden. Here is the link to the current jsfiddle: http://jsfiddle.net/V2x6s/3/ B ...

What is the best approach to choose the thead element from a dynamically created table?

My table in JavaScript/JQUERY is dynamically constructed. Once the table is created, I am attempting to target the thead element. Here is a snippet of my code: $(document).ready(function(){ buildTbl(); }); function buildTbl() { var tbl = '< ...

Obtain HTML element properties from a webpage using the Selenium tool in Python

The task at hand is to extract the pink email information from the webpage, while ensuring the confidentiality of the black/blue data. The process will be carried out using Python 3.6. ...

Unable to scroll content above the header/banner

Hey there, I'm looking for some assistance to achieve a similar effect to the one on this page: https://jsfiddle.net/WsXP6/126/ However, my goal is to have the top section be a solid color instead of an image. I've been struggling to make it wo ...

Tips for selecting an element within a span by clicking on it?

Is there a way to click on an element that is contained within a span tag? I have attached a screenshot for reference. https://i.sstatic.net/FkhDB.jpg I would greatly appreciate any help on how to successfully click on that specific element. ...

How can you extract the contents of a div tag that includes an image tag using regular expressions in JavaScript?

I have a string that was generated with the following content tesgddedd<br> <div><img style="max-width: 10rem;" src="folder/mypicture.jpg"><div> <br></div></div> My goal is to target the div co ...

Emphasize the cells located in the bottom left quadrant of the table (triangular shape)

I've dynamically created an HTML table with a specified number of rows and columns. The next step is to highlight the cells in the bottom left half of the table with a light red color, forming a triangle pattern similar to the one shown in this link. ...

Images with full-width will scroll horizontally

Is there a way to fix the horizontal scroll issue? <!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https:// ...

Tips on moving information from one form to another after referencing the original page using Javascript and HTML

Imagine this scenario: A page with three text fields, each with default values. There is also a hyperlink that performs a database lookup and returns parameters to the same page where the hyperlink was clicked. The goal is for the text boxes to be automa ...

Modify the color of the FA SVG icon when the input is in focus

Have you ever wanted to modify the color of fa-svg icons when the input field is focused? If you are using MDB (Material Design for Bootstrap), then achieving this customization is quite possible. Check out the HTML code snippet below: <div class="col ...

Utilizing a local video file as a video background in HTML and CSS

I've hit a roadblock while attempting to set a video on my computer as the background. The video file is named "runbg.avi" and it resides in the same folder as my HTML and CSS files. After scouring through numerous websites, I encountered a couple of ...

In search of the HTML code for the forward button when extracting content from a webpage

While using Power Automate Desktop to scrape a webpage, I encountered an issue with clicking the next button. Even after copying the HTML code within the developer tools of the webpage, I found that both the previous and next buttons had the same path, mak ...

Selenium encountered an error: Element not found - Could not locate element: {"method":"CSS selector","selector":"*[data-test="email-input"]}

Recently, my application has been encountering an error when trying to log in through a web form. The issue seems to be with locating the email input field: "no such element: Unable to locate element: {"method": "css selector", "s ...

A guide to troubleshooting the "Missing Font" error caused by a Chrome Extension in Google Chrome

Summary: Can I see the list of fonts available on a website using Chrome? As a Chrome OS user, I am unable to install custom fonts on my system. To overcome this limitation, I developed a Chrome extension that adds the fonts I desire to web pages: &quo ...

Tips for waiting for an input element to be enabled in Selenium WebDriver

I am currently developing a script to select and input values on a screen within JIRA. https://i.sstatic.net/byQLF.jpg The 'issue type' field is an 'input' element with an autocomplete feature: <input type="text" autocomplete="of ...