Datatable floats over other elements

madhungarian

This might be a CSS question but I really don't know where to begin. I have a datatable that appears to "float" over other elements in my page. For example, if I had a datatable and an , like so:
in head section...




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



#paymentgrid { width: 100%; }
#payments { width: 800px; height: 100px;}


in form...


<% Html.Grid(Model.PaymentList)
.Columns(column =>
{
column.For(model => model.PaymentNumber);
column.For(model => String.Format("{0:C}",model.CollectionAmount)).Named("Collection Amount").DoNotEncode();
}).Attributes(id => "paymentgrid").Render();
%>


test

The if there were more than one row in the table, it would cover the h2. What do I need to do in the style sheet to make the h2 visible and keep the table in its own place?

Thanks. Any help is appreciated!

madhungarian

I fixed my problem by setting height: auto in the style sheet for the data table.