CSS Positioning Example

by FatalMojo

HTML

<div id="container">
    <div class="item">
        <div class="thumbnail-wrapper">
            <img src="http://wiki.xbmc.org/images/7/70/Example.png" />
            <div class="title">
                Title 1
            </div>
        </div>
        <div class="content">
            Some content goes here, eventually.
        </div>
        
    <!-- also, does anybody know how to avoid this kind of issue underneath? If there is any kind of whitespace, including new lines, between the closing div.item and the next opening div.item, the respective divs get put on separate lines, which is not the desired behavior -->
        
    </div><div class="item">
        <div class="thumbnail-wrapper">
            <img src="http://wiki.xbmc.org/images/7/70/Example.png" />
            <div class="title">
                Title 2
            </div>
        </div>
        <div class="content">
            Some content goes here, eventually.
        </div>
    </div>
</div>

CSS

#container {
    width: 600px;
    background: #ddd;
}

.item {
    position: relative;
    display: inline-block;
    width: 50%;
}

.thumbnail-wrapper {
    text-align: center;
    position: relative;
}

.thumbnail-wrapper img {
    border-radius: 50%;
}

.title {
    padding: 3px 0;
    background-color: #000;
    color: #fff;
    width: 100%;
    position: absolute;
    
    /* this is the problem */
    top: 50%;
}