Fluid site using floated elements; width not shrinking to fit in Firefox

Hi,

I am looking for help in what should be something relatively simple but I cannot seem to find the solution to it.

I am trying to build a fluid/flexible site (http://www.http://amapoladecoracion.com/V2/ that resizes images and then floats them. I am defining a height for these images and leaving width as auto expecting a shrink to fit behaviour. I have tried this in IE, Chrome for Mac and Windows, Safari, and FF Mac and Windows. It works fine in every browser but FF Mac and Windows, perhaps it is FF that is doing things correctly, I do not know, but it is not applying the shrink to fit width that I was expecting. Any insights?

Code for the section I am having troubles with follows:


<div id="wrapperContenidos">

<div id="limitadorAncho" >


    	<div class="articulo">
        	<span>
        	<a href="#"><img  src="images/DSC00641.jpg" alt="artículo" /></a></span>
        	

          </div>

    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC00985.jpg" alt="artículo" /></a></span>

           </div>


    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC04863.jpg" alt="artículo" /></a></span>

           </div>


    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC07461.jpg" alt="artículo" /></a></span>

           </div>



    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC07467.jpg" alt="artículo" /></a></span>


           </div>


    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC00641.jpg" alt="artículo" /></a></span>

           </div>


    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC00641.jpg" alt="artículo" /></a></span>

           </div>


    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC00641.jpg" alt="artículo" /></a></span>

           </div>


    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC00641.jpg" alt="artículo" /></a></span>

           </div>


    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC00641.jpg" alt="artículo" /></a></span>

           </div>



    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC00641.jpg" alt="artículo" /></a></span>


           </div>



    	<div class="articulo">
        	<span>
        <a href="#"><img  src="images/DSC00641.jpg" alt="artículo" /></a></span>

           </div>


    </div> <!-- fin limitadorAncho -->

</div>


Follows pertinent CSS:


#wrapperContenidos{
	position:fixed;
	display:block;
	top:2em;
	right:0.35em;
	bottom:1.9em;
	left:19.9%;
	margin:0.4em 0 0.4em 0.4em;
	z-index:1100;
	background-color:#c7c2bb;
	border:0.4em solid #363845;
	overflow:auto;
	}
	
#limitadorAncho{
	height:100%;
	width:90%;
	background-color:#FEF7E7;
	overflow:auto;
	
	}


.articulo{
	float:left;
	height:32%;
	width:auto;
	margin-top:0.4em;
	margin-left:0.4em;
	}
	
.articulo img{
	border:0.4em solid #363845;
	max-height:94%;
	}


And here are two images, one shows a Chrome browser with the images resized and floated as desired, the other is FF. As you can see by the background colours for the divs with the images, FF is making the div’s width the same as the un-resized image.

Thank you for taking your time to read this.

If my hunch is correct, each <div> holding the image, is that wide, because the image is that wide. You may have scaled down the image via a max-height, however the width is still being recognized by the parent.

I’d say this is a FF bug to be completely honest. The only workound I see is possibly feeding FF the correct fixed value via CSS (if that doesn’t work, then JS), if that even will work.

Keep a copy of that test case available to report in to mozilla if it is indeed found to be a bug. I don’t want to jump to conclusions…

I’m not sure what causes it yet.

If I have etime after work tonight I’ll take a more extensive look.

Hi Ryan,

Thank you. Yes, the divs are showing at image width… can it be a bug? It sure looks like one to me but I trust FF engineers are eons more knowledgable than I (with I being a novice in this field).

At any rate, it looks as though I will have to go the JS way as I can not know the width of the images since they will be fed dynamically and each will be different.

Best wishes from Spain.

Maybe (or surely) herein lies the problem:

<percentage>
Specifies a percentage width. The percentage is calculated with respect to the width of the generated box’s containing block. If the containing block’s width depends on this element’s width, then the resulting layout is undefined in CSS 2.1.

Which is part of the specification for width in CSS 2.1 http://www.w3.org/TR/CSS21/visudet.html#the-width-property

Just another example of FF behaving as it should.

What’s really weird is how every single other browser is apparently showing it the opposite way…

But Weaned, he didn’t set a percentage width on the images.

Thank you for replying Ryan.

Well, image sizes ARE being set in terms of percentage and the containing block’s width depends on the width of the image element so the width value is undefined which is what the specification says (so the other browsers are not playing by the rules, apparently).

I will try to redefine everything in terms of ems and see if that works.

For the record: ems work just as fine.

Are you saying you are using ems and it’s behaving correctly now?

Oh, there is an extra word in my last post, it should read: ems work just fine. So to answer your question, yes, using ems makes the widths shrink to fit.

That’s extremely weird.

Either way, glad you got it sorted :).