Simple jquery/iframe problem

Simple jquery/iframe problem

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/jquery-examples-horizontal-accordion/) to create a banner.

Here is what I want the final banner to look like:
Image

I have coded the .CSS and added the jquery to my html file and now it looks like this:
Image

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:
Image

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:
Image

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.