Reminiscing about the "good ol days" of tables certainly won't help, but do any of you know the best way to make something vertically align on the bottom of an object, given a dynamic height of a table?

Picture two columns in a layout, and every page is different, the left column (containing the content of the website) is changing every day and the height is constantly going further and further down. Lets say your design required a complex element of text and maybe a picture always floating at the bottom of the right-hand column. what's the easiest way to achieve this (standards compliant, of course)?

If all else fails and there's no easy way to do this, and even if I have to set a constant for a height of the table, I'd still like to know the easiest way. At this point, for this client, a halfway-there solution will still look pretty much the same as a dynamic solution...it just means more headaches for me.

Thanks in advance guys!

- Zachary Beschler

3 answers

1
point

I notice that you are using table cells right now. An easy implementation would be to put the two columns in <div>s (without the table) within a parent div:

<div class="parent">
 <div class="leftcol">
content
</div>
<div class="rightcol">
     <div class="image">
        the image you want to position at bottom
     </div>
</div>
</div> 

Use the following css

div.parent {
position:relative;
overflow:hidden;
}               

div.leftcol {
width:60%;
float:left;
}          

div.rightcol {
width: 40%;
float:right;
}           

div.image {
position:absolute;
bottom:0;
right:0;
}

Note that if you have text in the right column and it is long, it might overlap with the image. In that case, you need to put a padding on the div.rightcol that is equal to the height of the image you want to position at bottom right.

Answered about 8 years ago by Divya Manian
  • Excellent! Thanks for the response. I will definitely give this a shot! And you are correct about the tables! The only reason why I am using tables is because of this one reason: the height of the two adjacent columns must be the same so that the background colors match exactly at the bottom. Also, the structure of the website needs to be such that if the content of either of the columns extends at any time, the other column will automatically match it. I'm open to other ways of achieving this effect with divs as well. :) Zachary Beschler about 8 years ago
  • That can be done with Faux Columns, A List Apart has a good article on that: http://www.alistapart.com/articles/fauxcolumns/ Divya Manian about 8 years ago
0
points

I've also used a div that clears the content above it, put the image into it and then apply a negative top margin to the image equal to its height, so it lives below everything but jumps back up into place.

Answered about 8 years ago by Tony Crockford
-2
points

It can be done through a variation of the technique to vertically centre elements described here. It assumes that:

  1. You can absolutely position the element in question
  2. The element you're positioning has a specified height so that you can make room for it

Then something like this should work (not tested):

#myoutercontainer { position:relative; border-bottom: 100px }
#myinnercontainer { position:absolute; top:100%; height:100px; }

Basically creating a bottom border of the height of the element and then positioning it over the border. Could also try bottom:0 instead of top:100%.

Answered about 8 years ago by Rob Crowther