CODEWITHSUNDEEP
htmlcss
Andrey
Andrey

Reputation: 859

inline-blocks not in a row

I have several inline-blocks that do not appear in a row. You can view it as a fiddle: http://jsfiddle.net/24vjC/

CSS:

body {
    font-family:"Open Sans";
    margin: 0px;
    padding: 0px;
}
.card-row {
    position: absolute;
    left: 0px;
    right: 0px;
    text-align: center;
    background-color: rgba(204, 255, 187, 0.5);
    /*vertical centering*/
    top: 50%;
    margin-top: -121px;
}

.card {
    width: 200px;
    position: relative;
    background-position-y: 32px;
    background-image: url('http://placekitten.com/200/100');
    background-repeat: no-repeat;
    display: inline-block;
    cursor: pointer;
    transform: scale(0.7);
    transition: all .5s;
    -webkit-transform: scale(0.7);
    -webkit-transition: all .5s;
}
.card:hover {
    transform: scale(1);
    -webkit-transform: scale(1);
}
.card .title {
    text-align: center;
    font-variant: small-caps;
    background-color: #CCC;
    padding: 5px;
    font-weight: 800;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.card .desc {
    margin-top: 100px;
    text-align: center;
    background-color: #CCC;
    padding: 5px;
    font-size: 11px;
    height: 100px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

HTML:

<body>
    <div class="card-row">
        <div class="card ca-titleA">
            <div class="title">Title A</div>
            <div class="desc">Phasellus tincidunt sapien a sapien eleifend volutpat sed ac purus.</div>
        </div>
        <div class="card ca-titleB">
            <div class="title">Title B</div>
            <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere pharetra elit, in porttitor est scelerisque eget.</div>
        </div>
        <div class="card ca-titleC">
            <div class="title">Title C</div>
            <div class="desc">In imperdiet libero nisi, quis malesuada felis pulvinar sit amet. Morbi tortor leo, ultrices.</div>
        </div>
    </div>
</body>

From testing with it, the divs with class .card get placed at a different vertical height based on how many lines of text are in the divs within them with class .desc, even though the .desc divs have a fixed height.

Upvotes: 0

Views: 158

Answers (1)

andrew
andrew

Reputation: 9583

use vertical-align:top

updated jsfiddle here: http://jsfiddle.net/24vjC/1/

Upvotes: 1

Related Questions