I'm working on a Drupal site that promotes rural products and services of several vendors. On the main page I display a few items in a grid, each on a 'product card' (vendor, address, phone, product image, product name, price, 'Buy now' button). Since each part of these attributes of a product may has different lenght, the layout of the page is very confused (see this screenshot: http://tinypic.com/r/2i1ede9/5).
Actually I have two questions about this issue:
display: inline-block;
and the vertical-align: top;
or vertical-align: bottom;
attributes but they didn't worked for me.Drupal generates the grid with these table cells and divs:
<tr class="row-3 row-last">
<td class="col-1 col-first">
<td class="col-2">
<div class="vm_prod_cat prod_cat_tur">
<div>
<div class="views-field views-field-uc-product-image">
<div class="vm_product">
<div class="offsite_selling">
</td>
<td class="col-3 col-last">
</tr>
You could use the display:table family rules to have boxes behaving like tables :
.gal {
width:80%;
margin:auto;
text-align:center;
min-width:350px;
}
.gal article {
display:inline-table;
height:300px;
width:30%;
min-width:100px;
box-shadow: 0.5em 0.5em 0.5em,
inset 0 0 0 1px;;
margin:10px;
}
.gal article > header ,
.gal article > footer ,
.gal article > div {
display:table-row;
padding:0.5em;
background:gray
}
.gal article > div {
display:table-cell;
height:100%;
vertical-align:middle;
background:rgba(0,0,0,0.2);
}
<section class="gal">
<article>
<header>
header that takes room it needs
</header>
<div>
content that takes room left
</div>
<footer>
footer that takes room needed
</footer>
</article>
<!-- ... and so on -->
see test here : http://codepen.io/gc-nomade/pen/ALifh
each article may grow alone. To avoid them to grow on their width, add table-layout:fixed;
, nothing will stop them growing on their height. You need to set a minimal safe height.