底部對齊流體佈局中的右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;放在兩個部分上，並將導航部分垂直對齊到底部。