Question

I want try to create this screen, but text fields on the right side are shifted above.

Here is a working example and here is my code:

HTML:

<div class="TileMenu">
    <div class="TileRow">
        <div class="LeftTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Castle" alt="Castle" />
            </div>
            <div class="TileText">
                <p>Text1</p>
            </div>
        </div>
        <div class="RightTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="House" alt="House" />
            </div>
            <div class="TileText">
                <p>Text 2</p>
            </div>
        </div>
    </div>
    <div class="TileRow">
        <div class="LeftTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Satellite" alt="Satellite" />
            </div>
            <div class="TileText">
                <p>Text 3</p>
            </div>
        </div>
        <div class="RightTile">
            <div class="TileImage">
                <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Palace" alt="Palace" />
            </div>
            <div class="TileText">
                <p>Text 4</p>
            </div>
        </div>
    </div>
</div>

CSS:

.TileRow{
    padding: 5px 0px;
    clear: both;
}

.LeftTile{
    width: 49.7%;
    float: left;
    /*height: 340px;
    overflow: hidden;*/
}

.LeftTile img{
    width: 100%;
}

.RightTile{
    width: 49.7%;
    float: right;
    /*height: 340px;
    overflow: hidden;*/
}

.RightTile img{
    width: 100%;
    float: right;
}

.TileImage{
    width: 49.7%;
}

.TileText{
    position: relative;
    margin-top: -80px;
    max-width: 150px;
    height: 50px;
    background-color: #FFF;
    color: #57abe9;
    padding-left: 10px;
    display: table;
}

.TileText p{
    display: table-cell;
    vertical-align: middle;
    font-size: 1.3em;
}

Before I tried to use top:-80px; but than I got a big white space between each row (because of the text field). So now I’m using margin-top: -80px; but this seems only to work in Firefox.

Answer 1

How about position: absolute?

http://jsfiddle.net/KjakS/8/