IE8 CSS Table Effect
- by Ian
I've been trying to make this cross browser (specifically IE), but I do not want to use tables. I will not be able to specify the container width with CSS because its contents (the image) will dynamically change with Javascript, so I need the container to 'auto-size' horizontally.
The desired effect would be a centered image with two sets of text (one of the left and one of the left) directly underneath the image, aligned to it's inner edges.
Example (Doesn't work on IE): http://pastehtml.com/view/19pbyw9.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container { display:table; }
</style>
</head>
<body>
<center>
<div id="container">
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="" /><br />
<span style="float: left;">test</span>
<span style="float: right; text-align: right;">test2</span>
</div>
</center>
</body>
</html>
