2 divs next to each other in qtip1

Question

I want to show a popup using qTip1 with 2 divs, the first one contains a picture and has to be on the left, the second one has some text in a table and has to be on the right. The problem is when I create the inner HTML for qTip, the table with the text is always under the picture and not on the right. I've tried some solutions here on stackoverflow but I think I'm missing something.

This is what the generated inner HTML for qTip looks like:

<div id="infoBoxParent" style="margin: 20px 20px 0 0; border: 1px solid #333; overflow: auto">
    <div id="infoBoxPicture" style="float: left; border: 1px solid green;"><img
            src="foo.png"
            alt="" width="111" height="170" class="photo left" style="float: left;"/></div>
    <div id="infoBoxFacts" style="float: right; border: 1px solid red; overflow: hidden">
        <table>
            <tr>
                <td style='padding:5px;text-align:left;'>Some Text:</td>
                <td style='padding:5px;text-align:right;'>Stack Overflow is a question and answer site for professional
                    and enthusiast programmers. It's built and run by you as part of the Stack Exchange network of Q&A
                    sites. With your help, we're working together to build a library of detailed answers to every
                    question about programming.

                </td>
            </tr>
        </table>
    </div>
</div>

What am I doing wrong?

Answer 1

You could try to remove all the inline css and put the following code in the header. This should work.

<style>
   #infoBoxParent {
    margin: 20px 20px 0 0;
    border: 1px solid #333;
    overflow: auto;
    width: 100%;
    }
    #infoBoxParent div {
    position: relative;
    float: left;
    border: 1px solid;
    }
    #infoBoxPicture{
    border-color: green;
    width: 30%;
    }
    #infoBoxFacts{
    border-color: red;
    width: 68%; /* 2% margin for the lines */
    }
</style>