Cannot get text to line up next to this div

Question

I am having difficulty getting a block of text to align up to the right of the chart.

Here is what the resulting html is supposed to look like

Here is what it currently looks like

Everything looked perfect before adding the second column of text. Now it looks like it not only does not align next to the chart div but its throwing off the gray container as well.

Here is my CSS:

    @CHARSET "UTF-8";
    .page {
     position: relative;
     background-color: #ffffff;
     width: 1200px;
     margin: 0px auto;
     box-sizing: border-box;
     border-left: 1px solid #d0d0d0;
     border-right: 1px solid #d0d0d0;   
    }
    table {
     border:0px;
     width:100% 
    }
    table.reviewsouter .reviewleft{
     width:800px
    }
    table.reviewsouter .reviewright{
     width:400px
    }
    #reviewspotlight {
     position: relative;
     background-color:#000000;
     height:111px;
     z-index:19997;
     font-family: DinWebCond, Sans-serif;
     color:#ffffff;
    }
    #reviews {
      position: relative;
      background-color:#ffffff;
      color:#000000;
      border-right:1px solid #d0d0d0;
    }
    #reviews table tr.reviewuserinfo {
      background-color:#f0f0f0;
      height:60px;
      border-left:1px solid #d0d0d0;      
    }
    #reviews table tr.reviewuserinfo img.avatar{
      position:relative;
      width:40px;
      height:40px;
      margin:10px;
      display: inline-block;
      vertical-align: middle;
    }
    #reviews table tr.reviewuserinfo div {
      display:block
    }
    #reviews table tr.reviewuserinfo a {
        color:#e85a06;
        font-family:DinWebCond,Sans-serif;
        border:none;
        text-decoration:none;
    }
    #reviews table tr.reviewuserdata {
      background-color:#ffffff;
      height: 315px;
      border-left:1px solid #ffffff;
      vertical-align: top;  
    }
    #reviews table td h2 {
        position:relative;
        display:inline-block;
        white-space:nowrap;
        font:27px/27px DinWebCond,Sans-serif;
        margin:0px;
        text-transform:uppercase;
        /**padding:20px 0px 9px 15px;*/
        /**padding-top:20px;*/
        /**padding-left:20px;*/
    }
    #reviews table td h2 img.stars {
        position:absolute;
        margin-left:10px;
        display:inline-block;
    }
    #reviews table td h2 span.rating{
        position:absolute;
        margin-left:145px;
        display:inline-block;
        color:#e85a06;
        font-weight:bold;   
    }

    table.reviewchart {
        position:relative;
        display:inline-block;
        white-space:nowrap;
        border-collapse: collapse;
        font:14px/14px DinWebCond,Sans-serif;
        margin:0px;
        text-transform:uppercase;
        /**padding:20px 0px 9px 15px;*/
        padding-top:20px;
        padding-left:20px;  
    }
    table.reviewchart td.reviewlabel{
        /**padding-top:15px;*/
        padding-bottom:15px;
    }
    #reviews.dl {
        position:relative;
        margin: 15px 15px 15px 15px;
    }
    #reviews dt {
        position:relative;
        display:inline-block;
        float:left;
        width:165px;
        /**text-align:right;*/
        pointer-events:none;
        margin:0px;
        padding:3px 0px 2px 0px;
        z-index:2;
        text-align:right;
    }
    #reviews dd {
        position:relative;
        display:block;
        margin:0px;
        padding:3px 0px 2px 0px;
        z-index:1
    }
    #reviews dd .bar {
        position:relative;
        display:inline-block;
        width:50px;
        height:15px;
        margin:1px 20px -1px 20px;
    }
    #reviews dd .bar div {
        position:absolute;
        left:0px;
        top:0px;
        height:100%;
        background-color:#4ac4f3;
        border-top-right-radius:3px;
        border-bottom-right-radius:3px;
    }

Here is my HTML:

<div id="reviews">
           <xsl:for-each select="/*/clubreviews/review">
            <table cellpadding="0" cellspacing="0">
                <tr class="reviewuserinfo">
                <td width="1%"><img class="avatar" src="/act/avatar/35274"/></td>
                <td><a href="/profile/{./userid}"><xsl:value-of select="./username"/></a><br/><span style="color:#a0a0a0">posted on <xsl:value-of select="./formatteddate"/></span></td>
                <td align="right" style="padding-right:15px">Joined 2 years ago<br/>12 reviews and 49 comments posted</td>
                </tr>
                <tr class="reviewuserdata">

                <td style="width:100%" colspan="3">
                    <table cellpadding="0" cellspacing="0" class="reviewchart">
                        <tr><td><h2>Overall Rating <img class="stars" src="/act/stars/{./rating}/large" /> <span class="rating"><xsl:value-of select="./rating"/></span></h2></td></tr>
                        <tr>
                            <td>
                                <dl>
                                    <dt><span>QUALITY OF THE DANCERS</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./qualitydancers"/></dd>
                                    <dt><span>PRIVATE DANCES, VALUE FOR MONEY</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./privatedances"/></dd>                              
                                    <dt><span>OVERALL HOSPITALITY</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./hospitality"/></dd>
                                    <dt><span>GUEST TO DANCER RATIO</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./guestdancerratio"/></dd>
                                    <dt><span>VARIETY OF DANCERS</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./varietydancers"/></dd>
                                    <dt><span>VALUE FOR MONEY, COVER CHARGE</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./covercharge"/></dd>
                                    <dt><span>VALUE FOR MONEY, DRINKS</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./drinks"/></dd>
                                    <dt><span>VALUE FOR MONEY, FOOD</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./food"/></dd>
                                    <dt><span>OVERALL ATMOSPHERE</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./atmosphere"/></dd>
                                    <dt><span>SOUND SYSTEM AND DJ</span></dt>
                                    <dd><div class="bar"><div style="width:100%"></div></div><xsl:value-of select="./sound"/></dd>
                                </dl>                           
                            </td>
                        </tr>
                    </table>
                </td>
                <td style="width:100%" colspan="3">
                A warm welcome from the time you enter the front<br/> door. The security is helpful and nice, the girls are <br/>very friendly, if not a little
                pushy... but hey, they <br/>gotta make a living too. Top quality....<br/><br/>
                A warm welcome from the time you enter the front<br/> door. The security is helpful and nice, the girls are <br/>very friendly, if not a little
                pushy... but hey, they <br/>gotta make a living too. Top quality....    
                </td>
                </tr>
            </table>
            </xsl:for-each>     
          </div>

Not quite sure what's wrong here but i am unable to fix it

Answer 1

Its because you are using style="width:100%"``<td style="width:100%" colspan="3">

I wouldn't recommend using % (percentage) but if that is what you want to use, the first <td> would be <td style="width:30%"> and the second one would be <td style="width:70%" colspan="2">

colspan="3" takes up the entire row since you only have 3 columns

But by using percentage, when displaying on a smaller screen, it would not show properly. A suggestion would be to use bootstrap and use divs that way you can specify col-xs-12 col-sm-12 col-md-4 for the left and col-xs-12 col-sm-12 col-md-8 for the right so when on a smaller screen, it moves the second div to the bottom for a better look

Answer 2

Change the code from

<td style="width:100%" colspan="3">

to

<td>

Also I recommend you to do some research about designing with div elements, instead of tables

---

If you prefer, you can change the first occurrence of

<td style="width:100%" colspan="3">

for

<td colspan="2">

and the second occurrence for

<td colspan="1">

---

This is happening because the first row has 3 columns <td> and when you specify that the first<td colspan='3'> will occupy 3 columns, therefor the next <td> will be rendered in the next space, after the 3 columns.