Align Elements in a Carousel

Posted on by Matt

bottomalignexample

The Problem

In this situation, I wanted to feature a carousel of video game box art with purchasing information. Only problem is, there’s pretty much only been one time of the history of that medium that the boxes have been the same size (the DVD case). But now even that time is moving on. So how do you get these different sized boxes to line up nicely?

There’s multiple ways to deal with it, but my approach is to align the boxes to the bottom. This way the user’s eyes don’t bounce around when trying to look at prices, and more importantly adding to their cart.

Great, only problem now is I’m using jQuery UI to create my carousel, and it needs some very particular markup, or it will break.

The Markup

The carousel is called for here, and JavaScript does the rest.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<ul id="mycarousel1" class="jcarousel-skin-tango">
    <li>
        <div>
            <a href="javascript:;"><img src="img/skyrim.png" alt="The Elder Scrolls V: Skyrim"></a>
            <p><a href="javascript:;">The Elder Scrolls V: Skyrim</a></p>
            <p>$59.99</p>
            <p><img src="img/smallstars.png" width="75" height="16" alt="rating"></p>
            <p><a href="javascript:;"><img src="img/addcart.png" width="80" height="28"></a></p>
        </div>
    </li>
    <li>
        <div>
            <a href="javascript:;"><img src="img/burningrangers.png" alt="Burning Rangers"></a>
            <p><a href="javascript:;">Burning Rangers</a></p>
            <p>$199.99</p>
            <p><img src="img/smallstars.png" width="75" height="16" alt="rating"></p>
            <p><a href="javascript:;"><img src="img/addcart.png" width="80" height="28"></a></p>
        </div>
    </li>
    <li>
        <div>
            <a href="javascript:;"><img src="img/shenmue.png" alt="Shenmue"></a>
            <p><a href="javascript:;">Shenmue</a></p>
            <p>$20.00</p>
            <p><img src="img/smallstars.png" width="75" height="16" alt="rating"></p>
            <p><a href="javascript:;"><img src="img/addcart.png" width="80" height="28"></a></p>
        </div>
    </li>
    <li>
        <div>
            <a href="javascript:;"><img src="img/pokemonhg.png" alt="Pokemon HeartGold Version"></a>
            <p><a href="javascript:;">Pokemon HeartGold Version</a></p>
            <p>$14.99</p>
            <p><img src="img/smallstars.png" width="75" height="16" alt="rating"></p>
            <p><a href="javascript:;"><img src="img/addcart.png" width="80" height="28"></a></p>
        </div>
    </li>
    <li>
        <div>
            <a href="javascript:;"><img src="img/katamari.png" alt="Katamari Damacy"></a>
            <p><a href="javascript:;">Katamari Damacy</a></p>
            <p>$49.99</p>
            <p><img src="img/smallstars.png" width="75" height="16" alt="rating"></p>
            <p><a href="javascript:;"><img src="img/addcart.png" width="80" height="28"></a></p>
        </div>
    </li>
</ul>

The divs within list items are my real trouble spot here. I can’t just vertical-align them like I can with divs by themselves.

The CSS

This is where the magic happens. This one CSS rule targets the carousel, the list item within the carousel, and the div within the list item. The greater than sign makes sure the rule doesn’t reach into the fourth level of elements (a, p, and img). Absolute positioning saves the day here.

1
2
3
4
.jcarousel-list-horizontal li > div {
    position:absolute;
    bottom:0px;
}

The Result

All the images are aligned to the bottom, so there is a single line of viewing for the product information. Which makes for a much better user experience.