Need div to sit at bottom of containing div, now top content wont displace lower content when expanding

Question

I wanted to make a site with a fixed height, but after
posting on this forum have decided against it.
Im now trying to make a sort of ‘best of both
worlds’ design that isn't a fixed height, but uses a
min-height value so it will have the same height for the majority
of users. The site will normally look like it want it to, but will
also be able to expand in the rare times this is needed,
sacrificing aesthetics only when necessary.
My site is here;
http://tfproperty.co.uk/testing/tfemp6/
Most of the top links work fine. I put extra text in the
‘Products and Services’ page and you can see that the
text does not displace the content below it, but instead goes
‘underneath’ it. The reason for this is the CSS below;
.bottom {
bottom:0;
left:0;
position:absolute;
If I remove this CSS then the text displaces the content
below it like it should. That CSS is there for a reason though. I
want the content of the div 'bottom' to sit at the bottom of the
div 'container'. If you click on the ‘TFE’s Energy
Plan’ links at the bottom of the page, the text ‘coming
soon’ appears. I need this text to appear from the bottom of
the page (which it currently does).
Thanks for all the help that has got me to this stage, but
how can I get round this final problem?
thanks

Answer 1

> what do you mean by 'clear the float'? something like
this?;
>
http://www.positioniseverything.net/easyclearing.html
Sorta, but definitely not that. Read this to see -
http://www.tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp
> Will using more id and less class think make a
difference on this page or
> is
> it more just good habit in general?
It is a good habit. And it forces you to think in terms of
the normal flow
of the page, rather than just slapping a class on an element.
In addition,
it will encourage you to begin thinking of the expanded use
of descendent
selectors.
> you can see the background image doesn't go all the way
down, despite
> being
> set to repeat. If i click on 'products and services' the
background image
> does
> repeat behind the text, but again only goes down about
10px into the div
> 'bottom'.
This will definitely be fixed by clearing the floats within
that container.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"jdldn" <[email protected]> wrote in message
news:[email protected]...
> what do you mean by 'clear the float'? something like
this?;
>
http://www.positioniseverything.net/easyclearing.html
>
> Will using more id and less class think make a
difference on this page or
> is
> it more just good habit in general?
>
> ive taken screen shots to show the problem.
>
> according to a render site ie is working fine;
>
http://tfproperty.co.uk/testing/ie.tiff
>
> but his is how it looks to me in FF;
>
http://tfproperty.co.uk/testing/ff.tiff
>
> you can see the background image doesn't go all the way
down, despite
> being
> set to repeat. If i click on 'products and services' the
background image
> does
> repeat behind the text, but again only goes down about
10px into the div
> 'bottom'.
>
> 'container' and 'bottom' should both be contained in
'wrapper'
> thanks
>