响应式WordPress设计中的DIV对齐/定位

Question

我有一个嵌套的DIV，它位于其他页面内容的“顶部”。我需要DIV坐在页面内容下面。

我尝试过使用z-index和overflow这样的东西，但还没找到修复程序。我搜索过StackOverflow并找到了几个不同的选项，但我还没有找到任何可行的工作。

div.ucc-callout位于div.post-entry中。当我缩小网站时，div.ucc-callout会改变为全宽，就像它应该......但它位于div.post-entry中的内容之上。我需要它来清除div.post-entry中的内容。

HTML示例

    <div class="post-entry">
    <p>This is some sample text.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor nisl sit amet ipsum imperdiet, at convallis neque malesuada. In at facilisis arcu. </p>
    <p>Donec faucibus massa in magna rhoncus pharetra. Pellentesque tempus, diam ac eleifend auctor, sem turpis posuere turpis, eget aliquam magna metus vel mauris. Donec maximus ac leo at porttitor. Nam a lectus bibendum, vestibulum justo vel, fermentum sem. Sed pharetra lorem ac consequat euismod. Nulla consectetur justo eget mauris vehicula, sit amet congue erat efficitur. Phasellus vestibulum consectetur velit, et dignissim enim pulvinar sit amet. Suspendisse pharetra, massa sed ultricies porttitor, mi odio imperdiet ipsum, ut faucibus tortor elit consequat est. Pellentesque et sagittis ex. In dictum ex nisl, at bibendum nisl vehicula a.</p>
    <div class="ucc-callout">
This is the nested DIV that sits on top of the paragraph text above and won't align properly.
    </div>
    </div>

CSS示例

.post-entry {
position: relative;
clear: both;
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}


.post-entry .ucc-callout {
float: none;
clear: both;
width: auto;
margin: auto;
position: absolute;
bottom: 0;
}

我意识到我的选项可能会因为这是一个WordPress网站而受到限制。另请注意，我的CSS技能很生疏，这是我第一次尝试使用响应式CSS。