Home/ Questions/Q 7638253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T08:07:49+00:00

I am using the latest if the jQuery DataTables . I am struggling with

  • 0

I am using the latest if the jQuery DataTables.

I am struggling with an issue and I am not sure what it is and how to fix it. The data table’s bottom pagination overlaps my bottom div container and I am not sure why it is doing this? Can someone please help me get it right?

Here is my HTML markup:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link href="Assets/DataTables-1.9.0/jquery.dataTables.css" rel="stylesheet" type="text/css" />
        <link href="Assets/Stylesheets/pbe_l_r2.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

        <div class="main-container">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
        <div class="main-container">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
        <div class="main-container">

            <table id="example">
                <thead>
                    <tr>
                        <th>Rendering engine</th>
                        <th>Browser</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Gecko</td>
                        <td>Mozilla 1.8</td>
                    </tr>
                    <tr>
                        <td>Webkit</td>
                        <td>Safari 1.2</td>
                    </tr>
                    <tr>
                        <td>Gecko</td>
                        <td>Mozilla 1.8</td>
                    </tr>
                    <tr>
                        <td>Webkit</td>
                        <td>Safari 1.2</td>
                    </tr>
                </tbody>
            </table>

        </div>

        <script src="Assets/JavaScripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="Assets/DataTables-1.9.0/jquery.dataTables.min.js" type="text/javascript"></script>
        <script>

            $(document).ready(function () {
                $('#example').dataTable();
            });

        </script>

    </body>
</html>

Here is my cascading stylesheet:

h1,h2,h3{margin-top:0;}

#extra{width:300px;}
#main{width:725px;}

.main-container{border:1px solid #000;padding:1em 1em 1em 1em;}

This is all that I have on my page and stylesheet. Look at the div that contains my data table. The bottom of the data table seems to overlap that the bottom padding. I am currently using IE 8 and the latest version of FireFox 10.0.2.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I added <div style="clear:both"></div> after the table.

    • 0