divs не заполняет пустое место на дисплее: стол;

Question

Я создал слайд-шоу, и справа от него есть divs, они будут увеличены, когда вы наведете над ними, и когда вы вытащите курсор из div, он будет сжиматься. Но, в стороне (родитель divs) находится в правильном месте, где это должно быть, это divs, которые не заполняют верхнюю часть элемента в стороне. Как я могу заставить divs заполнить элемент в стороне и не сломать что-нибудь еще?

.thing { 
 
    height: 120px; 
 
    width: 250px; 
 
    z-index: 10; 
 
    position: relative; 
 
    border: 5px solid brown; 
 
} 
 
.thing:hover { 
 
    position: absolute; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 11; 
 
} 
 
.report { 
 
    text-align: left; 
 
    vertical-align: top; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.aside { 
 
    display: table-cell; 
 
    padding-top: 5px; 
 
    width: 250px; 
 
    border-radius: 10px; 
 
    border: 2px solid black; 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 385px; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 750px; 
 
    height: 400px; 
 
    border-radius: 5px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
}

<div class="report"> 
 
    <div id="imgGallary" class="container"> 
 
    <img src="images/companies.png" alt="" width="750" height="400" /> 
 
    <img src="gallery" alt="" width="750" height="400" /> 
 
    </div> 
 
    <aside class="aside"> 
 
    <div id="c1"></div> 
 
    <div class="thing" style="background-color: blue;"> 
 
     <h1>Find Us!</h1> 
 
    </div> 
 
    <div class="thing" style="background-color: orange;"></div> 
 
    <div class="thing" style="background-color: pink"></div> 
 
    </aside> 
 
</div>

Answer 1

Ваш макет CSS путает display: table и display: relative. Они несовместимы, как у вас есть. Предпочитаемый способ компоновки ваших .container и aside - использовать f loats. Я пересмотрел ваш пример, чтобы плавать эти два контейнера рядом друг с другом (примерно на 80/20 сплит для ширины). У этого есть дополнительный бонус, чтобы сделать ваш макет отзывчивым.

Работая codepen: http://codepen.io/staypuftman/pen/vKoPmw

.thing { 
    height: 120px; 
    width: 250px; 
    position: relative; 
    border: 5px solid brown; 
} 
.thing:hover { 
    position: absolute; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 
.report { 
    text-align: left; 
    vertical-align: top; 
    display: table; 
    width: 100%; 
} 
.aside { 
    padding-top: 5px; 
    width: 18%; 
    border-radius: 10px; 
    border: 1% solid black; 
    overflow: hidden; 
    float: left; 
    position: relative; 
    height: 385px; 
} 
.container { 
    float: left; 
    width: 80%; 
    height: 400px; 
    border-radius: 5px; 
    border: 1px solid black; 
    overflow: hidden; 
}