Bottom-align right div elements in fluid-layout

Question

Please, is anyone able to help? I need to align my RH image-navigation to always be at the bottom of a browser window, no matter how the window is resized.

I have created a fluid layout of a parent .container (max-width 800px) with 3 divs inside:
- Topmast at the top
- Two side-by-side column divs (66:33) underneath the topmast

• LH: mainbody is the left aligned column,
• RH: navigation is right aligned column – that I need to bottom align

And then finally a Footer div (outside the main container, spanning the full browser width).

My trouble is that the navigation elements (4 rollover images stacked on top of each other) never align to the bottom of the browser, but stay to the top of the div.

I have tried the following CSS all to no avail:
vertical-align:0 bottom:0 padding-bottom:0 margin-bottom:0
I would prefer a CSS solution, that also does not require a fixed height to be specified for the divs. Please can anyone help? I have been scouring for weeks for a solution :(

As I am a newbie, I am unable to post an image here of what I have, so I will try draw it below. But here is also a link to a screengrab of my website currently with the code below:

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

Drawing it out, what I have is:

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

What I need is:

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

Here is my 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;
}

Here is my html for the two columns:

<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>

Please can anyone help? I am not sure how to use JsFiddle either to post a demo.. Still a bit new to web design.. Thank you so much in advance.

Answer 1

You can use something like display: inline-block; on your elements to position them beside each other, and this will also support the vertical-align: bottom; property that I see you were trying to use.

Take a look as this jsFiddle demonstrating this.

Notice that I have removed a lot of the styles you were using, most importantly the float properties.

Also notice that I rearranged the order of your html so that the navigation section no longer comes before the main body, as the floating of the elements is no longer rearranging them.

Then, I placed display: inline-block; on both sections, and vertically aligned the navigation section to the bottom.