Question

I would like to know how to embed my div tag, which I want to be inside the tab of a jquery tab: I have this code:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>

    <div id ="tabs-1">
        <div id=panel>
            <br>
            <form action="xx.php" method="post" name="post">
                 <textarea
                 </textarea>
                 <br>
                 <input type="submit" name="submit" value="Post "/>
             </form>
        </div>
        <p class="slide">
             <a href="#" class="btn-slide">Post</a>
        </p>
    </div>
</div>

However, this doesn’t properly embed the div (id = panel) into the div tabs-1 and just comes out at the bottom of the tab, not properly inside it, yet still goes away when I click on another tab.

I have attached an image demonstrating my problem, apologies if the content inside is irrelevant.

Please click on this link to view the problem: https://i.stack.imgur.com/ZImwI.png.

As you can see, it is not inside the tab, but still goes away when yoy click on another tab.

What must I do to be able to actually put that div, which I will not change, into the tab so that it actually goes inside it.

I have tried to make this as clear as possible. Thanks

Answer 1

I’m guessing the div#panel is probably floating. If that’s the case, you should be able to fix this by adding a clearing element at the last child of div#tabs-1. E.g.

<div id ="tabs-1">
    <div id="panel">
         ...
    </div>
    <p class="slide">
         ...
    </p>

    <!-- the clearing element -->
    <div style="clear:both; float:none"></div>
</div>