Content appears below the div of the current tab when switched to new tab

Question

I'm using Bootstrap dynamically toggleable tab. I have two tabs, the content of the first tab(active tab) is dynamically bind on page load and when I switch to the second tab, the contents are again dynamically bound onclick . The elements of different tab appear one below the other. How do I prevent the div from appearing one below the other?

<div id="content">
    <table>
        <tr>
            <td >
                <div id="graphArea" class="startSize">
                    <div>

                </div>
            </td>
            <td id="searchArea">
                <ul class="nav nav-tabs" id="resultList">
                    <li class="active"><a data-toggle="tab" href="#resultsArea">Results</a></li>
                    <li ><a data-toggle="tab" href="#facetsArea">Facets</a></li>
                </ul>

                <div class="tab-content">

                <div class="searchsize" class="tab-pane fade in active" id="resultsArea">
                    <table>
                        <tr>
                            <td>
                                <p><b>Search Results for :</b> <p style="color:green"><b id="searchText"></b></b></p></p>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <div class="list-group">
                                    <div>
                                        <table  class="table-hover" id="resultTab" style="word-break: break-all;">
                                            <tbody id="searchResults">
                                            //data is dynamically bound to tbody
                                            </tbody>
                                        </table>
                                    </div>
                                    <div id="pager">
                                        <ul id="pagination" class="pagination-sm"></ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>


                    <div id="facetsArea" class="tab-pane fade">
                        <p>Helllo</p>
                    </div>

                </div>
            </td>
        </tr>
    </table>
</div>

Answer 1

Remove the duplicate class attribute class="searchsize" from the div and make it as class="tab-pane fade in active searchsize" . It works.