CSS positioning for jquery plugin element

The layout in question is here: http://www.davedaranjo.com/media.html

This is probably an issue in standard positioning with css, but I've tried every positioning combination I can think of to achieve this:

http://i.imgur.com/y1qRU.jpg

Every time I try to move the player anywhere on the page, it po开发者_开发技巧sitions itself at the bottom, even below the footer image. I've even tried putting the content in a table with the links and video in the left td and the player in the right, but the player won't even sit in the table. I've also tried a number of positioning tags in the css file and at best, it will move if I give it a fixed position, but because the rest of the layout isn't fixed (and isn't on the rest of the site), that's not a viable solution.

I realize this is probably something fundamental that I'm missing here, but any suggestions would be extremely helpful. There's a lot of positioning in the css from the plugins download files and I can't seem to decipher them all.

Thank you!

---

I checked your source code and you still use the align HTML attribute. That attribute is deprecated. It does not work in HTML 4.01 or XHTML 1.0 and it won't work in HTML 5 either.

Instead use CSS rules to do your alignment. Use text-align, padding, margin, float, clear and positioning rules to get your HTML elements to appear where you want them to on the page.

Source: http://www.w3schools.com/tags/att_div_align.asp

---

you have to put your javascript at the place you want it in the page. I think you can position it like this.

<div id="left">
<img src="media/MediaTextBanner.jpg" alt="" width="596" height="58">
 <table>
 <tr>
 <td>
 <img src="media/Transcriptions.jpg" width="547" height="39">
 <br><a href="media/mmbtab.html">TABLATURE: Me &amp; My Bass Guitar: Victor Wooten</a>
 <br><a href="media/Circles - Gwizdala - Bass Parts.pdf"> Circles: Janek Gwizdala - Bass Notes</a>

 <br><a href="media/That Stern Look - Gwizdala - Bass Parts.pdf">That Stern Look: Janek Gwizdala - Bass Notes</a>
 <br><a href="media/flyback.html">Fly Back [2009 Redux]: Dave D'aranjo / The Ocean Band</a>
<p>
<img src="media/VideoBanner.jpg" width="547" height="39">
<p>
<iframe src="http://player.vimeo.com/video/21755863?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="398" height="224" frameborder="0"></iframe>
<br><a href="http://vimeo.com/darangatang" target="_blank"><img src="contact/thumbs/Vimeo.jpg" width="90" height="81"></a>
<a href="http://www.youtube.com/profile?user=DaveDaranjo" target="_blank"><img src="contact/thumbs/YouTube.jpg" width="90" height="81"></a>
<br><img src="media/OceanBanner.jpg" width="547" height="39">
 <br><a href="http://www.myspace.com/oceanband" target="_blank">The Ocean Band - MySpace</a>

 <br><a href="http://www.youtube.com/profile?user=theoceanbandsg" target="_blank">The Ocean Band - YouTube</a>
 <br><a href="http://www.cdbaby.com/Artist/TheOceanBand" target="_blank">The Ocean Band - CDBaby.com </a>
</p>
</td>
<td position: relative; vertical-align: top;><center>
<div id="title" align="right"></div></center>
</td>
</tr>
</table>

<center>
<img src="/ambigram.jpg" alt="" width="113" height="61"><br>
  <font color="CC0000"> &copy; 2011 DaveDaranjo.com<br>

    All Rights Reserved.</font></p>
    </center>
</div>

<div id="right">
<script type="text/javascript">
        $(document).ready(function(){
            var description = 'Solo bass work, videos, and songs from bands. ';

                       $('body').ttwMusicPlayer(myPlaylist, {
                autoPlay:false, 
                tracksToShow:12,
                description:description,
                jPlayer:{
                    swfPath:'../js' //You need to override the default swf path any time the directory structure changes
                }
            });
        });

    </script>
</div>

This puts the text and images you want to the left in a box and the player in another box. You now have to position the boxes to floating boxes so they can be next to eachother in css:

#left {
    float: left;
}

#right {
    float: right;
}

That should do it!