I have a parent div and inside 4 inner child div next to each other, inside each child div I have 3 div; one contains a title, the other an image and the last one an icon. I have noticed that they are aligned from the bottom and if an image does not have the same height, the title is at a different height from the others. I want the title to always be on top and at the same height regardless of the size of the image
I thank you in advance for your help
.cajapadre {
text-align: center;/* Una caja al lado de la otra importante padre*/
margin-bottom: 0px;
}
.caja4hijo {
background-color: #F8F8F8;
padding: 0px;
margin: 0px;
width: 225px;
display: inline-block;/* una caja al lado d ela otra importante hoja */
}
.espacio-art {
padding-bottom: 15px;
}
.titulo-art {
font-family: 'Sansita', sans-serif;
font-size: 1.2em;
color: #C42427;
background: #9AB01E;
}
<article>
<!--primera tanda-->
<div class="cajapadre">
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico</div>
<div class="imagen-art espacio-art"><a class="picfancy" href="http://arbolesdenavidad.net/wp-content/uploads/2013/10/arbol-bajito-120-510.jpg" title="3M™ Littmann® Select"><img src="img/thumbs/liv.jpg" width="133"alt=""/></a></div>
<div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
</div>
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Select</div>
<div class="imagen-art espacio-art"><a class="picfancy" href="http://1.bp.blogspot.com/-njHeRmV9ZN4/TfLBdtZxPnI/AAAAAAAANEc/iqHI9Q_nN0c/s1600/copiadepencil4wi9.gif" title="3M™ Littmann® Select"><img src="img/thumbs/sel.jpg" width="133"alt=""/></a></div>
<div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
</div>
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico</div>
<div class="imagen-art espacio-art"><a class="picfancy" href="img/fonendos/Liviano.jpg" title="3M™ Littmann® Select"><img src="img/thumbs/liv.jpg" width="133"alt=""/></a></div>
<div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
</div>
<div class="caja4hijo">
<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico Edición Especial</div>
<div class="imagen-art espacio-art"><a class="picfancy" href="img/fonendos/Liviano.jpg" title="3M™ Littmann® Select"><img src="img/thumbs/liv.jpg" width="133"alt=""/></a></div>
<div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
</div>
</div>
</article>
<!--fin primera tanda-->
the problem persists in the display:inline-block property of the parent elements of each product box, that is, the elements with class '.caja4hijo'
If you replace it with display: block and do a float:left you get your title elements to be aligned.
So yes, it depends on your template layout, and the layout of other elements, since float:left will cause the parent of these elements to lose the height reference. You will have to use an element with the property clear:both; for instance.
I would advise you to use a css framework like bootstrap or material. In addition to helping you with the whole theme of the grid (distribution of elements "boxes" of your template) they will provide you with many more useful elements and effects that will make your work fast and light.
Here are the links: http://getbootstrap.com/ , http://materializecss.com/ , http://foundation.zurb.com/
You must set a height to the image to do what you want, since the image has different sizes, if it is the same with the button image, it is better to set a height to prevent the misalignment of the title from happening, that is why I have established a rule for the class
.imagen-art
or you can put it on the label
<img />
like this