I am trying to quickly mock up the layout using the table format. Bad, I know, but just need to be able to demonstrate the layout to the client before spending any more work.

So I've got a table in the front page template, two rows and two columns, no sidebars. I've got the main content area displaying in the top left cell, and am trying to get the slideshow to display in the right top cell. If I only have a single slideshow item displaying, it displays correctly, however, if I add more than one (or keep the original slides) the cell is squished to the right of the page, not displaying 50% of the page width. Why might this be the case? How do I display the slideshow in the top right cell correctly?

Comments

Ok, so this displays correctly, well the slide controls are missing. but at least it displays at 50% width of the page
                <td valign="top">
<!-- #banner -->
<div id="" >
<?php print render($page['banner']); ?>
    <?php if (theme_get_setting('slideshow_display','mysite')): ?>
    <?php if ($is_front): ?>
    <!-- #slideshow -->
    <div id="slideshow">
    <!--slider-item-->
    <div class="">
    <div class="content container_6">
    <div class="grid_6">
    <!--slider-item content-->
    <div >
    <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>sites/all/themes/staterecords/mockup/GRG_7-71-180_sml.jpg"/>
    </div>
    <h2>Lorem ipsum dolor sit amet</h2>
    <strong>General</strong><br/>
    <em>Client name</em><br/>
    <br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    <div style="padding:30px 0 10px 0;"><a class="more" href="#">Tell me more</a></div>
    <!--EOF:slider-item content-->
    </div>
    </div>
    </div>
    <!--EOF:slider-item-->
    </div>
    <!-- EOF: #slideshow -->
    <!-- #slider-controls-wrapper -->
    <div id="slider-controls-wrapper">
    <div id="slider-controls" class="container_6">
    <ul id="slider-navigation">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    </ul>
    </div>
    </div>
    <!-- EOF: #slider-controls-wrapper -->   
    <?php endif; ?>
<?php endif; ?> 
</div><!-- EOF: #banner -->                    
                </td>

This code however, displays the slideshow controls, and the slideshow slides, but the cell is only about 5-10% of the width of the page/table.

<td valign="top">
<!-- #banner -->
<div id="" >
<?php print render($page['banner']); ?>
    <?php if (theme_get_setting('slideshow_display','mysite')): ?>
    <?php if ($is_front): ?>
    <!-- #slideshow -->
    <div id="slideshow">
    <!--slider-item-->
    <div class="">
    <div class="content container_6">
    <div class="grid_6">
    <!--slider-item content-->
    <div >
    <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>sites/all/themes/staterecords/mockup/GRG_7-71-180_sml.jpg"/>
    </div>
    <h2>Lorem ipsum dolor sit amet</h2>
    <strong>General</strong><br/>
    <em>Client name</em><br/>
    <br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    <div style="padding:30px 0 10px 0;"><a class="more" href="#">Tell me more</a></div>
    <!--EOF:slider-item content-->
    </div>
    </div>
    </div>
    <!--EOF:slider-item-->
        <!--slider-item-->
    <div class="">
    <div class="content container_6">
    <div class="grid_6">
    <!--slider-item content-->
    <div >
    <img class="masked" src="<?php print base_path() . drupal_get_path('theme', 'corporateclean') ;?>sites/all/themes/staterecords/mockup/GRG_7-71-180_sml.jpg"/>
    </div>
    <h2>Lorem ipsum dolor sit amet</h2>
    <strong>General</strong><br/>
    <em>Client name</em><br/>
    <br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    <div style="padding:30px 0 10px 0;"><a class="more" href="#">Tell me more</a></div>
    <!--EOF:slider-item content-->
    </div>
    </div>
    </div>
    <!--EOF:slider-item-->
    </div>
    <!-- EOF: #slideshow -->
    <!-- #slider-controls-wrapper -->
    <div id="slider-controls-wrapper">
    <div id="slider-controls" class="container_6">
    <ul id="slider-navigation">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    </ul>
    </div>
    </div>
    <!-- EOF: #slider-controls-wrapper -->   
    <?php endif; ?>
<?php endif; ?> 
</div><!-- EOF: #banner -->                    
                </td>