center a div inside a div

I'm trying to center a div inside a div. I have a containing div. Inside that div I have another div that has a table inside of it. The div and the table are fixed widths. The containing div is width 100% and is inside of a div that wraps the whole page. I'm having trouble getting my table div to center inside the containing div. Strangely enough I can get it to work inside of IE6 but not FF2.

I've tried the text-align: center. Which works for IE6. I tried the margin-right: auto; margin-left:auto; for FF2 but that doesn't work. It should. But it doesn't. I'm at a loss. Anybody have any ideas? I'm thinking of just using jqGrid and forgetting this whole stupid thing. But I won't know if that works until I do it...E I E I O.

Without code, it's hard to guess. The auto margin trick usually works for me.

I'm working on a jqGrid right now. If I'm still having problems after this I'll report back...

I thought for sure that the margin align would work too...heck I was on a page that used it for an example, and since I was using firefox it was supposed to work, and it did. But my own code wouldn't do it. Do you think I should specify a DTD?

Originally posted by Bryce Martin:
Do you think I should specify a DTD?

Sure. And while your at it throw in some arbitrary tags like <font /> and <embed />. I mean, as long as we're just guessing since we don't have example code to debug.

To Gregg's point, yeah, it's hard to help you debug this without any code.

With regard to adding a DOCTYPE, you might want to look up the concept of quirks mode on quirksmode.org. That often accounts for differences between IE and real browsers.

Unless I have a good reason otherwise, I try to keep all my pages in standards mode. This tends to make for more deterministic behavior.

Ok. I'll post the code for the page and then I'll post the external style sheet after that. Here are the issues that I'm seeing. In IE the tables will center if I use that nice little text-align: center; for the div. But I can't get the table header to stop from scrolling with the body. In FF2 the table works great and the header doesn't move, however, I can't get the div that contains the table to center. It should with the margin-left: auto; and margin-right: auto; but its not working. I'm at a loss.

So heres what you asked for...

JSP

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="IBM Software Development Platform">
<meta http-equiv="Content-Style-Type" content="text/css">
<META HTTP-EQUIV="expires" content="Thu, 16 Mar 2000 11:00:00 GMT">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<link href="Main2.css" rel="stylesheet" type="text/css">
 
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery122p.js"></script>
<script type="text/javascript" src="jquery.jqGrid.js"></script>
<script type="text/javascript">    
                        
$(document).ready(function() 
{
$('.stripeMe tr:even').addClass("even");
$('.stripeMe tr :-o	 dd').addClass("odd");
$('#date').append(getDate());
});
</script>
<title>Recap.jsp</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="left"><IMG src="theme/smallblue3.jpg" width="173" height="24"></div>
<div class="center">C/S Order Recap</div>
<div class="right" id="date"></div>
</div>
<div class="header">
<div class="left">Cust# ${recapBean.customerNumber}</div>
<div class="center">Cust Name: ${recapBean.customerName}</div>
<div class="right">PO# ${recapBean.purchaseOrder}</div>
</div>
 
<div class="headerUL">
<div class="one">Order #</div>
<div class="one">Job Name</div>
<div class="one">Quote</div>
<div class="one">Ord Val $</div>
<div class="five">Inv Val $</div>
</div>
 
<div class="header">
<div class="one">${recapBean.order}</div>
<div class="one">${recapBean.jobName}</div>
<div class="one">${recapBean.quote}</div>
<div class="one">$${recapBean.orderValue}</div>
<div class="five">$${recapBean.invoiceValue}</div>
</div>
 
<div class="tableMain">
<div id="tableContainer" class="tables">
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Line</th>
<th>Item</th>
<th>Item Description</th>
<th>Activity</th>
<th>Qty</th>
<th>Value</th>
<th>Date/Time</th>
<th>User</th>
</tr>
</thead>
<tbody class="stripeMe">
<c:forEach var="rowL" items="${list1}" varStatus="status">
<tr>
<td>
<h4>${rowL.line}</h4>
</td>
<td>
<h4>${rowL.item}</h4>
</td>
<td>
<h4>${rowL.itemDescription}</h4>
</td>
<td>
<h4 class="${rowL.activity=='Entered' ? 'entered' : 'added'}">${rowL.activity}</h4>
</td>
<td>
<h4 class="numeric">${rowL.quantity}</h4>
</td>
<td>
<h4 class="numeric">${rowL.lineValue}</h4>
</td>
<td>
<h4>${rowL.dateTime}</h4>
</td>
<td>
<h4>${rowL.user}</h4>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<div class="tableMain">
<div id="tableContainer" class="tables">
<table border="0" cellpadding="0" cellspacing="0">
<thead>
 <tr>
<th>Change</th>
<th>Order Value</th>
<th>Date/Time</th>
<th>User</th>
</tr>
</thead>
<tbody class="stripeMe">
<c:forEach var="rowC" items="${list2}" varStatus="status">
<tr>
<td>
<h4>${rowC.change}</h4>
</td>
<td>
<h4 class="numeric">${rowC.orderValue}</h4>
</td>
<td>
<h4>${rowC.dateTime}</h4>
</td>
<td>
<h4>${rowC.user}</h4>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

CSS

@CHARSET "ISO-8859-1";
div{
position: relative;
width: 100%;
background-color: purple;
color: white;
}
 
div.main{
width: 100%;
background-color: black;
color: white;
float: left;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
 
div.header{
width: 100%;
position: relative;
float: left;
background-color: yellow;
}
 
div.headerUL{
width: 100%;
position: relative;
float: left;
background-color: yellow;
text-decoration: underline;
}
 
div.left{
position: relative;
float: left;
background-color: red;
width: 25%;
}
 
div.center{
text-align: center;
position: relative;
float: left;
background-color: green;
width: 50%;
font-size: 20px;
}
 
div.right{
text-align: right;
position: relative;
float: left;
background-color: blue;
color: white;
width: 25%;
}
 
div.one{
position: relative;
float: left;
background-color: #66BBAA;
width: 20%;
}
 
div.five{
position: relative;
float: left;
background-color: #66BBEE;
width: 19.9%;
}

div.tableMain{
position: relative;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
float: left;
width: 100%;
}
 
/* The different widths below are due to the way the scroll bar is implamented */
/* by certain browsers. */
div.tables {
height: 290px;
overflow: auto;
width: 980px;
position: relative;
margin: 0 0 15px 0;
/*margin-left: auto;
margin-right: auto;
position: absolute;*/
text-align: center;
}
/* All browsers (but especially IE) */
div.tables table {
width: 964px;
}
 
/* Modern browsers (but especially firefox ) */
html>/**/body div.tables table {
width: 980px;
}
 
/* Modern browsers (but especially firefox ) */
html>/**/body div.tables table>tbody {
overflow: auto;
height: 250px;
overflow-x: hidden;
}
 
div.tables thead.tables tr {
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
left: 0px; /* fixes the header being over too far in IE, does not seem to effect FF */
}
 
/*prevent Mozilla scrollbar from hiding cell content*/
div.tables td:last-child {padding-right: 20px;}
 
/* make the TH elements pretty */
/*Edit scheme to match your page */
thead th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 1px 1px;
text-align: center;
}
 
table {
margin-left: auto;
margin-right: auto;
}
 
tr.even td{
background: #FFFFCC;
}
 
tr.odd td{
background: #CCCC99;
}
 
tr.over td{
background: #FF6633;
}