Help Please(Business website), Put table next to jquery slideshow Options

[bleedz129]

Hi

I have a table and a jquery slideshow. I have been trying to wrap them or put them next to each other for the last hour now and it is not working.

CODE

<div id="wrapper">                                                                         //This is the div that is supposed to wrap them together

<div style="margin:30px auto;max-width:900px;">                       //this is the slideshow
    
   <div id="amazingslider-1">                                                          
        <ul class="amazingslider-slides" style="display:none;">
            <li><img src="images/IMG_0083.JPG" alt="IMG_0083" /></li>
            <li><img src="images/IMG_0100.JPG" alt="IMG_0100" /></li>
            <li><img src="images/IMG_0107.JPG" alt="IMG_0107" /></li>
            <li><img src="images/IMG_0118.JPG" alt="IMG_0118" /></li>
            <li><img src="images/IMG_0205.JPG" alt="IMG_0205" /></li>
        </ul>
        <ul class="amazingslider-thumbnails" style="display:none;">
            <li><img src="images/IMG_0083-tn.JPG" /></li>
            <li><img src="images/IMG_0100-tn.JPG" /></li>
            <li><img src="images/IMG_0107-tn.JPG" /></li>
            <li><img src="images/IMG_0118-tn.JPG" /></li>
            <li><img src="images/IMG_0205-tn.JPG" /></li>
        </ul>
        <div class="amazingslider-engine"><a href="http://amazingslider.com" title="jQuery Slideshow">jQuery Slideshow</a></div>
    </div>
    
    
</div>
<div class="CSSTableGenerator" >                            //this is the table
                <table >
                    <tr>
                        <td>
                            Services
                    </tr>
                    <tr>
                        <td >
                            Purchasing Agent
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Service Representation
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Financial
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Negotiations
                        </td>
                        
                    </tr>
                    <tr>
                        <td >
                            COnsumer Protection
                        </td>
                        
                    </tr>
                </table>
            </div>
</div>

CSS CODES BELOW

CODE

#amazingslider-1 {
display:block;position:relative;margin:16px auto 56px; margin-left: 00px; margin-top: 200px;    ///for the slideshow
}
.CSSTableGenerator {                                                                                                                        //for the table
    margin:0px;padding:0px;
    width:20%;
    box-shadow: 10px 10px 5px #888888;
    border:1px solid #000000;
    
    -moz-border-radius-bottomleft:9px;
    -webkit-border-bottom-left-radius:9px;
    border-bottom-left-radius:9px;
    
    -moz-border-radius-bottomright:9px;
    -webkit-border-bottom-right-radius:9px;
    border-bottom-right-radius:9px;
    
    -moz-border-radius-topright:9px;
    -webkit-border-top-right-radius:9px;
    border-top-right-radius:9px;
    
    -moz-border-radius-topleft:9px;
    -webkit-border-top-left-radius:9px;
    border-top-left-radius:9px;
}

I will be very grateful thank you in advance

any additional questions you have ask me but pretty much i want them next to each other

[Christian J]

Hard to say without knowing the size of the table content, but perhaps you could float the table DIV to the left. As a bonus, that will make the slideshow move down below the table in narrow browser windows instead of causing an annoying horizontal scrollbar.

BTW comments in HTML look like this:

CODE

<!-- comment -->

and in CSS like this:

CODE

/* comment */