No replies
alexander_bosakov
alexander_bosakov's picture
Offline
newbie
Last seen: 10 years 13 weeks ago
Timezone: GMT+3
Joined: 2010-08-06
Posts: 1
Points: 2

Hi everybody,
I'm trying to line up several floated DIVs in a wrapper DIV, each one containing an image of unknown width. All my layout metrics are in %, and I'd like to have the images, correspondingly the enclosing DIVs at the same height, also given in %. What I tried to do, worked as I expected in Google Chrome, but when I tried Firefox, here's what happened:
I have an image, of, say, 600x200, call it "image______1"; image 325x200 - "image2", etc. I want it scaled down, and the container to fit around the image. I have something like this:

Doctype: xhtml
<markup>
<div id=...>
  ...
  <div id="wrapper">
    <div class="image_placeholder">
      <img class="button" src="image______1" />
    </div>
    <div class="image_placeholder">
      <img class="button" src="image2" />
    </div>
    ...
  </div>
  ...
</div>
</markup>
 
CSS:
<css>
div#wrapper {
  height:15%;
  float:left;
  position:absolute;
}
 
div.image_placeholder {
  height:100%;
  float:left;
  position:relative;
}
 
img.button {
  height:100%;
}
</css>

The image (600x200 px originaly) gets scaled proportionally to the height of the container DIV, but the container's width is set to 600px in Firefox. I did not test IE - don't have it, I'm on a linux system. I tried Google Chrome and Konqueror - in both of them the container's width is scaled accordingly, in Firefox - not. If I use "px" or "em" for the image height, container's width is scaled. If I use any %, including 0, the container's width is the width of the unscaled image. I tried other container, P instead of DIV - the same situation. As I noticed, it works as desired in Chrome or Konqueror - in them I have something like this:

[[[image______1][image2]]..................]

where the "[]" are the nested DIVs, each one with a height in % of the parent.
In Firefox:
[[[image______1..........][image2]......]..]
<------- 600 px -----> <-- 325 px -->
where the "...." are empty space, and it is preserved even if I add more content alongside the image - the container's width grows with the width of the added content.
Is this a bug in Firefox? And can I work around it in pure CSS? I can possibly use JavaScript to convert "%" to "px" and style the images's height in "px", but I'd like something more straightforward.
For another description of the same problem check this.