Simple jquery/iframe problem (hopefully)

Hello everyone!

I would just like to say that I am new to the site as well as programming with jquery.

Anyways, here is my question.

I am using a tutorial(this one to be exact: http://designreviver.com/tutorials/j...tal-accordion/) to create a banner.

Here is what I want the final banner to look like:
http://i44.tinypic.com/xmsh9h.png

I have coded the .CSS and added the jquery to my html file and now it looks like this:
http://i42.tinypic.com/2b1efk.png

The banner dimensions are 300x100px. So I put it in an iFrame. This is what my iframe looks like:
<p><iframe src="barFinal.html" frameborder="0" height="100" scrolling="no" width="300"></iframe></p>

However this is the result that I get:
http://i39.tinypic.com/2l8c68i.png

As you can see, part of it is cut off height-wise and the last tab is completely gone. After playing around with my iframe code, I made the height a bit larger. I discovered that the last tab went to another row:
http://i44.tinypic.com/2ahbac3.png

My question is how can I make the last tab stay in the same row and how can I make my html link actually fit the dimensions of my iframe?

Any help would be much appreciated.