No replies
cherubrock74
cherubrock74's picture
Offline
newbie
Last seen: 6 years 44 weeks ago
Timezone: GMT-5
Joined: 2013-01-10
Posts: 1
Points: 2

Hope someone can help me solve this issue. I am using yoo item module to create a product catalog on Joomla.
I need help aligning two divs of different height. In particular one div contains small preview images of products which vary in height and the other contains the title with the name of the product. The problem is that the two divs appear to align on the top, causing the list of product to appear uneven. I would like the images and the titles to be aligned horizontally so they always appear centered regardless of the height of the images.

The following is the css currently in use:

#yoo-zoo .items { position: relative; }
 
#yoo-zoo .items div.teaser-item {
	padding: 0px 10px 0px 10px;
	overflow: hidden;
}
 
/* position: media */
#yoo-zoo .items div.media-left {
	margin-right: 15px;
	float: left;
}
 
#yoo-zoo .items div.media-right {
	margin-left: 15px;
	float: right;
}
 
#yoo-zoo .items div.media-center { text-align: center; }
 
/* position: title */
#yoo-zoo .items h2.pos-title {
	margin: 5px 0px 0px 0px;
	font-size: 16px;
	font-weight: bold;
	line-height: 16px;
}
 
#yoo-zoo .items h2.pos-title a { text-decoration: none; }

Also using Firebug, I found the following code that may also be controlling the positioning of the small product images:

/* Hide from IE8 */
@media (min-width: 1px) {
.yoo-zoo img {
max-width: 100%;
height: auto;
}
}

Hope someone can help me out...I have been tring to solve this for a while
thank you