Forum Moderators: not2easy
I've been trying to use a centered div with a border as a container for a form laid out using a table, but have run into a problem in Firefox (oddly, IE behaves in the way I want). Naturally, I've set the width of the container div so that I can use left and right margins set to auto so the div will be centered. However, I would like the div to expand its width automatically, so it will contain the entire table. IE does automatically expand the div to contain the table, but Firefox does not, stubbornly honoring the width setting.
I realize that Firefox is probably behaving in a very standards-compliant way, and that IE is breaking the rules as it often does, but it just so happens I want the IE behavior this time, and need to find some way to get Firefox to behave the same way.
Below is a contrived example of the problem. Just look at it in IE, and then in Firefox. Anyone know of a way to get Firefox to expand the div like IE does?
--------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Div Problem</title>
<style>
#FormBrdr {
width: 100px;
margin-left:auto;
margin-right:auto;
padding: 5px;
border: 1px solid #003366;
}
</style>
</head>
<body>
<div id="FormBrdr">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In fermentum metus.</td>
</tr>
</table>
</div>
</body>
</html>
--------------------------------------------------------
Thanks,
Russ
So you want your <div> to act more like a table? That's easy enough, just add
display:tableto its CSS. Your problem though is going to be IE7 which I believe will act like Firefox but not recognise the
display:tableworkaround.
The way of doing it which IE will recognise is to set
text-align:centeron the <body>, then set
display:inline-blockon #FormBrdr and remove the margins and width. Inline-block elements shrinkwrap their contents in the absence of a width, which is what we want here. There's a downside to this method though - inline-block doesn't work in Firefox versions less than 3.
The third option is just to dump the <div> and style the <table> directly. I can't see any obvious reason why this wouldn't be possible with your code...
[edited by: Robin_reala at 6:46 am (utc) on May 17, 2007]
