Richard Lake schrieb:
vary in size a little, particularly height. Scroll down to the Climbers &> Some of the images on this page: http://www.pricklypair.co.nz/products.php Vines or Perennials to see an example.
All of the images are inserted in a floating div. When one of the floating divs in the line is taller than the last one on the line the next floating div seems to get hooked up on the longer one. Can anyone suggest another way of laying out the images that doesn't have this problem?
Georg and Sam already provided clear fixes for the float layout.
I would vote for a table.
But you've asked for another layout, and if the browsers would support display: inline-block, your page design would have an alternative in principle. Sigh. So this is a hack for testin, but not for production:
.proditem { display:-moz-inline-box; display: inline-block; vertical-align: top; min-width:100px; min-height:150px; border: 1px dotted rgb(0, 102, 0); margin: 0.5em; padding:0.5em; text-align: center;}
/* \*/
* html .proditem {
display: inline;
height:150px;
}
/* */.proditem img {display: block;}Bruno Fassino once had given this alternative (http://www.brunildo.org/test/inline-block3.html)
/but/
The main problem is Mozilla not supporting inline-block, and -moz-inline-box is not acting stable, AFAIK
So with this hack, chances are high that it will break. Note that your html must be changed like
<div class="proditem"><div> <img><a href="#">Puka</a> </div></div>
Remove the <p> and <br>, the double wrapping is needed(?) for Moz.
Ingo
****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
