Inline DIVs Under Netscape/Opera

From: Adam Siler (asiler_at_icglp.com)
Date: 01/28/04 

Date: Wed, 28 Jan 2004 22:50:37 GMT

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>

Relevant Pages

  • Re: inline list separators
    ... If you use borders, then the height of a border is given by the height ... We can't precisely control the height of inline boxes. ... We can make li float: left, set whatever height we want on it, and give ... But if we're using display: table anyway, we may as well make the floats ...
    (alt.html)
  • Re: 3-column liquid layout? (for thumbnails)
    ... inline listed thumbs). ... Your ListedCaptioned example still floats the s, though, and you ... display of block. ... just more divs. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: 3-column liquid layout? (for thumbnails)
    ... You are right about the meaning and I did feel the way you did ... inline listed thumbs). ... display of block. ... just more divs. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: CSS gap between inline elements
    ... The technique i'm using is very simple: a list with inline LI ... I can't understand where that gap comes from. ... display: inline; ... border: 1px solid red; ...
    (comp.infosystems.www.authoring.html)
  • Re: Inline DIVs Under Netscape/Opera
    ... This is a html issue, post in a news group for html ... > i want to display a series of inline, fixed-width DIVs that will wrap into> columns - a table, basically. ... > border: solid 1px red; ...
    (comp.lang.php)