CSS issue with the .dataTable_wrapper

jpszat

I just found out about dataTables earlier today and it looks amazing, and I am currently trying to incorporate it into a current project. I have a basic website with a main navigation menu across the top, and a secondary navigation on the left side. I then have a main div where the information is displayed. You can see this image for an example. http://i.imgur.com/IUQBw.png

I notice the dataTable is dropping below the left navigation menu. You can see it starts exactly where the left navigation menu ends. I know this is related to the .dataTable_wrapper declaration of {clear: both;}, but removing that does not make it look any better, the top toolbar bar just expands upwards and the table element won't move above the left navigation menu, so it is still ugly.

What am I doing wrong? Below is the css code, if that is helpful. Before I implemented dataTables, the table element was positioned correctly within the div, but afterwards it is below the left navigation menu. Thanks.

[code]
#wrapper {
width: 1024px;
margin: 5px;
}
#mainNav {
margin: 5px;
border: 1px solid black;
}
#mainNav a {
text-decoration: none;
color: red;
padding: 1px 1px 1px 50px;
}
#mainNav ul {
margin: 5px;
border: 1px solid black;
/* prevent overflow of items */
padding: 10px;
}

#mainNav li {
display: inline;
list-style: none;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
#secondaryNav {
border: 1px dashed green;
float:left;
width: 150px;
}
#secondaryNav ul{
list-style: none;
}
#secondaryNav a {
text-decoration: none;
color: green;
border: 1px dotted black;
display: block;
}
#main {
border: 1px dotted orange;
/* gutter from #seconaryNav width being 150px */
margin-left: 170px;
}

h1 {
font-size: 2em;
}

#footer {
border-top: 2px solid black;
margin: 5em 0em;
text-align: center;
font-size: .7em;
/* drop the footer below every other element */

clear: both;
}

/* tables */

table, #viewCustomerTable {
font-family: Arial, Helvetica, sans-serif;
width: "97%";
}

table td, table th, #viewCustomerTable td, #viewCustomerTable th {
border: 1px solid #DDB575;
font-size: 0.9em;
}

table th {
text-transform: uppercase;
text-align: left;
}

#viewEventTable {
font-size: 0.8em;
}
[/code]

allan

Perhaps remove the clear: both and add "float: right" since it looks like that is what you want? Its a little difficult to say exactly without being able to view the page, but that seems like a reasonable approach :-)

Allan