Проблема с макетом CSS - вертикальное выравнивание: снизу; и вопросы масштабирования

Question

У нас есть две коробки, связанные с «Что рядом» и «Создание идеальной виллы». Мы хотели бы, чтобы поле слева (что рядом) действовало очень похоже на правый («Создание идеальной виллы»), в то время как левая рамка должна масштабироваться при выравнивании к верхней части серого контейнера. Мы пробовали много методов, и у вас не получается! Таким образом, в левой части окна левая рамка должна быть масштабируемой, а вертикальная - снизу.

Вот наш код ...

HTML:

<div id="whats-nearby"> 
<h1>What's Nearby</h1> 
<div class="orange-triangle-180"><img src="images/orange-triangle.png"/></div> 
<img src="images/whats-nearby.jpg"/>     
</div> 
<div id="crafting-villa-vacation"> 
<h1>Crafting the perfect villa vacation</h1> 
<div class="orange-triangle-180"><img src="images/orange-triangle.png"/></div> 
<img src="images/crafting-villa-vacation.jpg"/> 
<h3 class="share-property">Share This Property</h3>   
</div> 

CSS:

#crafting-villa-vacation { 
    float: right; 
    width: 52%; 
    display: table; 
    margin-right: 3%; 
    margin-top: 200px; 
    margin-bottom: -119px; 
    } 
    #crafting-villa-vacation .orange-triangle-180 img{ 
    position: absolute; 
    top: -18px; 
    right: 10px; 
    width: 35px; 
    } 
    #crafting-villa-vacation img { 
    width: 100%; 
    float: left; 
    display: table-cell; 
    vertical-align: bottom; 
    } 
    #whats-nearby { 
    position: absolute; 
    bottom: 0; 
    top: 584px; 
    left: 60px; 
    z-index: 1; 
    width: 27%; 
    } 
    #whats-nearby img { 
    width: 100%; 
    display: table-cell; 
    } 
    #whats-nearby .orange-triangle-180 img{ 
    width: 35px; 
    position: relative; 
    bottom: 18px; 
    right: 5px; 
    margin-right: 420px; 
    } 

Answer 1

Посмотрите, что вы можете с этим сделать. Я немного поболтал с ним. Я довольно близко.

HTML:

<div id="whats-nearby"> 
    <h1>What's Nearby</h1> 
    <div class="orange-triangle-180"><img src="images/orange-triangle.png"></div> 
    <img src="images/whats-nearby.jpg"> 
    <h3 class="share-property"></h3>     
</div> 

CSS:

#crafting-villa-vacation { 
    float: right; 
    width: 52%; 
    display: table; 
    margin-right: 3%; 
    margin-top: 200px; 
    margin-bottom: -119px; 
} 
#crafting-villa-vacation h1 { 
    color: #f26649; 
    text-transform: uppercase; 
    font-family: 'Minerva', serif; 
    text-align: left; 
    padding-bottom: 10px; 
    font-size: 18px; 
} 
#crafting-villa-vacation .orange-triangle-180 img{ 
    position: absolute; 
    top: -18px; 
    right: 10px; 
    width: 35px; 
} 
#crafting-villa-vacation img { 
    width: 100%; 
    float: left; 
    display: table-cell; 
    vertical-align: bottom; 
} 

#whats-nearby { 
    float: left; 
    width: 27%; 
    display: table; 
    margin-left: 5%; 
    margin-top: 200px; 
    margin-bottom: -91px; 
} 
#whats-nearby h1 { 
    color: #f26649; 
    text-transform: uppercase; 
    font-family: 'Minerva', serif; 
    text-align: right; 
    padding-bottom: 10px; 
    font-size: 18px; 
} 
#whats-nearby .orange-triangle-180 img{ 
    position: absolute; 
    width: 35px; 
} 
#whats-nearby img { 
    width: 100%; 
    float: left; 
    display: table-cell; 
    vertical-align: bottom; 
} 
#whats-new h3.share-property { 
    background-color: #0073AE; 
    text-transform: uppercase; 
    font-size: 15px; 
    text-decoration: underline; 
    color: #fff; 
    width: 200px; 
    padding: 5px 10px; 
    position: relative; 
    top: -28px; 
    left: 0; 
    font-family: 'Minerva', serif; 
    clear: both; 
} 

Answer 2

Это то, что работает для меня. Посмотрите, поможет ли это. Он очень похож на поле, плавающее вправо, но вместо этого он плавает влево с несколькими разными значениями для позиционирования.

#whats-nearby { 
    float: left; 
    width: 27%; 
    display: table; 
    margin-left: 60px; 
    margin-top: 73px; 
    margin-bottom: -119px; 
}