Vertical Floats?

[grid212]

Hi,

I'm creating a page using CSS/XHML and I wonder if someone can help. Basically I have a DIV with a disclaimer I always want to appear at the bottom of the div. The disclaimer should be inline so that content doesn't overwrite it, but I also want the disclaimer to appear at the bottom of the div which is a fixed height, but can also overflow with content. Something like:

<div id="maincontent">

Some dynamic content here (this may be a little or a lot).

<div id="disclaimer">This disclaimer should appear at the bottom of the div, but also have a minimum margin if 20px with the content above
</div>

</div>

Basically what I need is something equivalent of a 'vertical float' - does anyone have any ideas?

Thanks a lot.

 

[Vragabond]

Normal document flow or relatively positioned elements will do that. If your #maincontent is not floated or positioned absolutely it will automatically push the next element at the bottom of it. If you start your #disclamer right after your #maincontent it will follow right after it. If for some design purposes, it needs be inserted into #maincontent, position it absolutely at the bottom and give #maincontent padding-bottom a big enough value to avoid content crashing into disclaimer.

#maincontent {
  ...
  padding-bottom: 20px;
}

#disclaimer {
  ...
  position: absolute;
  bottom: 0;
  height: 20px;
}