Make Div Align to Bottom of Column

see my illustration, which explains things.

I want the div to align to the bottom of the right column. The content of the right column is NOT fixed, it will change from page to page.




thanks,
Scott

 

Is there going to be nothing above it?
Why don't you just place the div at the end of what ever appears before it, so whatever is there the div will appear at the end. For example..

<column>
php or whatever you are using for the dynamic/changing content
the end div
</column>

 

yes, menus, content will be above.

I want the div to be at the bottom of the column (exactly above the footer) NOT directly underneath the menus. That way it will be in a fixed position at the bottom, rather that different positions depending on content.

thanks

 

Is it a fixed height div? If it is, placing it div outside the right column and giving it a negative top margin should work.

 

no, this was stated in the original post. thanks

 

I'm not talking about the right column, but the div you want align at the bottom of it. Is that div fixed height?

 

div#id
{
position: relative;
bottom: 0;

}

Code (markup):

Untested. It may work?

 

it may, but it didn't I already tried this one, and tried it by setting parent div (right column) to position: absolute

anyone else got suggestions?

thanks

 

sorry - yes, it will be fixed.

and by the way, I'm open to how it gets coded, currently I have it set like this:

<div id="wrapper">
	<div id="header"></div>
	<div id="content">
    	     <div id="content-left">Main Content Goes Here</div>
             <div id="content-right">Right Column that Varies in Size Goes Here</div>
             <div id="content-right-bottom">Fixed Div with Address Content</div>
             <div id="footer">Copyright Here</div>
       </div>
</div>

Code (markup):

 

i believe you can use pixel values to position it exactly where you want to

check the positioning section in the css tutorials on www.w3schools.com

 

Make the container for the two columns {position: relative;}.

In the right column, set padding-bottom ≥ height of the placed box.

Make the box {position: absolute;} with right and bottom offsets adjusted to clear the borders and margins. Its parent should be the columns' parent.

cheers,

gary