Right-align table within div (cross-browser compatibility)

I’m trying to right-align a table within a div. Not rocket science one would expect, however I’m having problems getting Firefox and Opera to render it the way I’d like. IE works fine, but that means nothing.

Here is my code:


<div style="border: solid 1px black; text-align: right;">
 <table cellpadding="2px" cellspacing="0" border="1">
  <tr>
   <td>
	Hello World!
   </td>
  </tr>
 </table>
</div>

Am I missing something really obvious?

Thanks,

Andy

Hello

try this


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	.x{border:solid 1px black;}
	head+body .x{overflow:hidden;}
	.y{float:right;}
	</style>
	<script type="text/javascript">

	</script>
		<!--[if IE]>
	<style type="text/css">
	.x{height:1%;}
	</style>
	<![endif]-->
</head>
<body>
<div class="x">
<table cellpadding="2" cellspacing="0" border="1" class="y">
	<tr>
		<td>Hello World!</td>
	</tr>
 </table>
</div>
</body>
</html>

Thanks! That floats my table to the edge of the page (which is what I asked for). Would you mind showing me how I could apply it when using a container div so that it’s just right-justified within the container?

Example:


<div width="200px">
 <div class="x">
  <table cellpadding="2" cellspacing="0" border="1" class="y">
   <tr>
	<td>Hello World!</td>
   </tr>
  </table>
 </div>
</div>

Thanks again,

Andy

Hello

i am not sure what you ask here ?

align right or justify ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	.x{border:solid 1px black;width:200px;}
	head+body .x{overflow:hidden;}
	.y{float:right;}
	.y td{text-align: justify;}
	</style>
	<script type="text/javascript">

	</script>
		<!--[if IE]>
	<style type="text/css">
	.x{height:1%;}
	</style>
	<![endif]-->
</head>
<body>
<div class="x">
<table cellpadding="2" cellspacing="0" border="1" class="y">
	<tr>
		<td>Hello World! how are you to day, thanks i am fine, hello hello hello</td>
	</tr>
 </table>
</div>
</body>
</html>

Sorry, I think I was confusing myself too.
I was trying to right-align the table within a content div, which itself was inside an outer div.

I was trying not to specify a pixel width for the content div, but I got around this by specifying width: 100%.

Your code was a great help!

Andy