底部对齐流体布局中的右div元素

Question

请问，任何人都可以提供帮助吗？无论窗口如何调整大小，我都需要将我的RH图像导航调整为始终位于浏览器窗口的底部。

我已经创建了一个父.container（最大宽度800像素）与3- div的内部的流体布局：
- 桅在顶部
- 两个并排侧柱的div（66:33）的下方在桅

• LH：是型主体左对齐列，
• RH：导航右对齐柱 - 我需要的底部对齐

然后终于页脚div（主容器外部，跨越整个浏览器宽度）。

我的问题是，导航元素（堆叠在彼此顶部的4个翻转图像）永远不会与浏览器的底部对齐，而是停留在div的顶部。

我曾尝试以下CSS都无济于事：
垂直对齐：0底部：0填充底：0边距：0
我宁愿一个CSS的解决方案，也不会需要为div指定一个固定的高度。请任何人都可以帮忙？我已经搜索了几个星期的解决方案:(

由于我是一个新手，我无法发布图片在这里我有什么，所以我会尝试绘制下面，但这里也是一个链接到一个用下面的代码我的网站screengrab目前：

http://hooboo.co.uk/Screengrab.jpg

绘制出来，我有什么是：

-----800px container span------------------------- 
    +----topmast-------------------------------------+ 
    +----2/3 width------------+ +----1/3 width-------+ 
    | mainbody    | | navigation (4-row)| 
    | that     | | that is short  | 
    | is      | +--------------------+ 
    | tall     |  
    |       | 
    +-------------------------+ 
    -------------------------------------------------- 
+--------footer 100% browser width-----------------------+ 

我需要的是：

-----800px container span------------------------- 
    +----topmast-------------------------------------+ 
    +----2/3 width------------+ 
    | mainbody    | 
    | that     | 
    | is      | +----1/3 width-------+ 
    | tall     | | navigation (4-row)| 
    |       | | that is short  | 
    +-------------------------+ +--------------------+ 
    -------------------------------------------------- 
+--------footer 100% browser width-----------------------+ 

这里是我的CSS：

.container { 
width: 84%; 
height: 100%; 
max-width: 800px; 
padding-left: 3%; 
padding-right: 3%; 
padding-top: 6%; 
padding-bottom: 0%; 
margin-bottom: 0%; 
margin-left: auto; 
margin-right: auto; 
margin-top: auto; 
} 

#topmast{ 
clear: both; 
margin-left: 0; 
margin-top: 25%; 
height: auto; 
width: 100%; 
min-width: 240px; 
min-height: auto; 
display:block; 
} 


#navigation{ 
clear: right; 
float:right; 
width:33.125%; 
height:600px; 
height:auto; 
max-width:265px; 
vertical-align:bottom; 
bottom: 0; 
margin-bottom: 0; 
padding-bottom: 0; 
position:relative; 
display:block; 
} 

#mainbody { 
clear: left; 
margin-right:33.125%; 
margin-top: 0%; 
width: 65%; 
display:block; 
} 

#footer { 
clear:both; 
background-color:#333; 
height:100px; 
} 

这里是我的两列HTML：

<div id="navigation" align="right" style="vertical-align:bottom"> 

<a href="mailto:email@url.com" target="_blank" 
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Email','','00_assets/buttons/00_BUTTONS_EMAILO.png',1)"> 
<img src="00_assets/buttons/00_BUTTONS_EMAIL.png" alt="Email: email@url.com" 
width="100%" height="auto" id="Email" border="0" style="float: right;"/> 
</a> 

<a href="tel:+1234567890" target="_blank" 
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Call','','00_assets/buttons/00_BUTTONS_CALLO.png',1)"> 
<img src="00_assets/buttons/00_BUTTONS_CALL.png" alt="Call: +1234567890" 
width="100%" height="auto" id="Call" border="0" style="float: right;"/> 
</a> 

<a href="https://url.com/screenname" target="_blank" 
onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','00_assets/buttons/00_BUTTONS_TWEETO.png',1)"> 
<img src="00_assets/buttons/00_BUTTONS_TWEET.png" alt="Tweet us" 
width="100%" height="auto" id="Twitter" border=0 style="float: right;"/> 
</a> 

</div> 

<div id="mainbody" align="left"> 
<h1>Welcome to website</h1> 
<p class="Body"> Mainbody copy about website services goes here.</p> 
</div> 

请谁能帮助？我不知道如何使用JsFiddle发布演示..还是有点新的网页设计..非常感谢你提前。

Answer 1

您可以在元素上使用类似display: inline-block;的东西来将它们放置在彼此的旁边，这也将支持我看到您尝试使用的vertical-align: bottom;属性。

看看这个jsFiddle展示了这一点。

请注意，我删除了很多您正在使用的样式，最重要的是float属性。

另请注意，我重新安排了html的顺序，以便导航部分不再出现在主体之前，因为元素的浮动不再重新排列它们。

然后，我将display: inline-block;放在两个部分上，并将导航部分垂直对齐到底部。