Невозможно получить макет CSS правильного

Question

Этого сайта: http://dev.calffl.org

Три нижних виджета коробков помечены тест, тест 2, тест 3.

Обратите внимание, как коробка проходит вниз в нижний колонтитул и перезаписывает колонтитул в плохой способ?

Это должно уйти, и коробки должны быть 210px высотой, с 90px наложенного текста/прозрачности, закрепленных на дне.

Я, по-видимому, схожу с ума.

Answer 1

Ваш .block имеет фиксированную высоту, в то время как его дочерние элементы имеют еще более высокую высоту, таким образом переполняя его родительский элемент и оболочку.

Удаляя фиксированную высоту пикселя на .block, и установив поплавок на это обертка:

.homepageBottomBox-widget-wrapper { 
    margin: 0 auto; 
    width: 100%; 
    float: left; 
} 

Затем сайт обертка будет следовать этому примеру, хотя я не уверен на 100% от того, что вам нужно на стилизация части прозрачности. Но я добавил фотографию, чтобы понять, не заставило вас это сделать.

Answer 2

Сделано улучшение на прозрачности путем:

1. Добавление position:relative к классу widget_sp_image (или просто класс виджета)
2. Установка position:absolute;bottom:0px к вашему widget_sp_image-описание класса.