i want to display a series of inline, fixed-width DIVs that will wrap into
columns - a table, basically. i can do it under Internet Explorer, but the
same code under Netscape or Opera does not behave as expected. the DIVs
"collapse" into small rectangles (i put a border around them so i could
see), but their contents (some middle-aligned text) span the width of the
page. if not for the borders that i added, it would appear that each DIV was
width: 100%. rather than a number of smaller columns, i get one big, fat
column. what am i doing wrong? here's the code (with only two columns, for
simplicity):
<?xml version="1.0" encoding="us-ascii"?>
<!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-US">
<head>
<title></title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=us-ascii" />
<style type="text/css">
div.productListing {
display: inline;
width: 128px;
text-align: center;
/* temp */
border: solid 1px red;
}
</style>
</head>
<body>
<div class="productListing">
<div class="productImageContainer"><img class="productImage" src="#"
alt="Cufflinks" /></div>
<div class="productName">Gold Cufflinks</div>
<div class="description">They are cufflinks and they are gold.</div>
<div class="price">$59.90</div>
</div>
<div class="productListing">
<div class="productImageContainer"><img class="productImage" src="#"
alt="More Cufflinks" /></div>
<div class="productName">Gold Cufflinks</div>
<div class="description">These cufflinks are also gold.</div>
<div class="price">$69.90</div>
</div>
</body>
</html>
