float와 조합하여 음수 여백 - 위쪽이 예상대로 작동하지 않습니다 (Firefox에서만 사용)

Question

이 화면을 만들려고하지만 오른쪽의 텍스트 입력란이 위로 이동합니다. 여기

는 working example이며, 여기에 내 코드 :

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; 
} 

전에 top:-80px;을 사용하려고했지만 텍스트 필드 때문에 각 행 사이에 큰 공백이 있습니다. 이제는 margin-top: -80px;을 사용하고 있지만 이것은 Firefox에서만 작동하는 것 같습니다.

Answer 1

어떨까요?

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

Answer 2

당신이 RightTile 클래스의 이미지에 float:right를 제거하면? http://jsfiddle.net/KjakS/7/

.RightTile img{ width: 100%; }