1

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

Mockup

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.

2
  • 1
    I'm sorry but I don't see what the problem is?
    – Niklas
    Jan 19, 2012 at 14:22
  • Have you tried to view the example with IE9, Chrome, Opera, Safari? Text2 and Text4 are shifted above.
    – testing
    Jan 19, 2012 at 14:24

2 Answers 2

3

How about position: absolute?

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

5
  • 1
    +1 - this is a perfect example of when to use position: absolute. Although you should move your code example into your answer. Jan 19, 2012 at 14:38
  • I tried to use position:absolute before (on TileImage and on TileText). But than my layout got destroyed and I didn't used top. You instead used position: relative on RigthTile and on LeftTile in combination with position: absolute on TileText and top. Perhaps you would like to explain the solution in more detail to me?
    – testing
    Jan 19, 2012 at 14:45
  • 1
    position: absolute is placed relatively within the nearest positioned box. So to keep it relative to its immediate parent you must give the parent element a position other than static (default). We give it position: relative in this instance so it is kept in the flow of the document. I would also use bottom rather than top, since you are positioning closer to the bottom of the box. Jan 19, 2012 at 14:55
  • 1
    After you add position:relative to the container, inner element with position:absolute will refer to that container instead of whole document.
    – ogur
    Jan 19, 2012 at 14:57
  • 1
    Also, if you used position: absolute on both elements (TileImage and TileText) then that would not have worked either as that would take them both out of the flow of the document and the parent box would have no height. So you would only position the TileText absolutely as you would want TileImage to dictate the height. Jan 19, 2012 at 15:00
1

What if you remove the float:right on the image in the RightTile class? To something like this: http://jsfiddle.net/KjakS/7/

.RightTile img{ width: 100%; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.