Utilizing the most recent version of jQuery's DataTables.
Facing an issue where the pagination at the bottom of my data table is overlapping with my bottom div container. Unable to figure out the cause and solution for this problem. Can anyone provide assistance?
Below is the 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>
Cascading stylesheet used:
h1,h2,h3{margin-top:0;}
#extra{width:300px;}
#main{width:725px;}
.main-container{border:1px solid #000;padding:1em 1em 1em 1em;}
The pagination of the data table seems to be overflowing into the bottom padding of the container. Testing on IE 8 and latest FireFox 10.0.2. Need help resolving this display issue.