Glue footer to bottom of viewport on short divs & scroll longer d

C

Cimbian

I have created a CSS site that has a footer spanning the bottom of the
viewport and whilst I have managed to glue it ot the bottom I have another
div that is behind it even though I think I have set-up the container
properly.

the troublesome page is http://www.cimbian.co.uk/BognorArchers/recurve.htm
and you will see that the bottom of the text in the main pane is obscured.

Basically I have a meta-wrapper for the whole page: and then have the main
content within it. Following on from the content I have the footer and then I
close the meta-wrapper. Something like this:

<div id="meta_wrapper">
<div id="BA_main_content_area" class="clearfix">
<div id="BA_Main_Full_Width">
</div>
<div id="footer">
</div>
</div>

My CSS for this is:

div#meta_wrapper { width: 760px;
margin-left: auto; margin-right: auto;
background-color: yellowgreen;
text-align: left;
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit; }

html>body #meta_wrapper { height: auto; }

div#BA_main_content_area {width:760px;
align: center;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;

margin-left: 0;
font-size: 0.85em }

div#BA_Main_Full_Width { border:3px inset yellow;
font-family: Verdana; font-size: 0.85em;
text-align: justify;
position: relative;
width: 500px;
margin: 10px 30px 0px 10px;
padding: 3px;
background-color: #FFFFCC;
float: left; }

div#footer { position: absolute;
bottom: 0;
width:760px;
padding:4px 0;
font-size: 0.6em;
text-align: center;
background-color: white; /* Blue */
border-top:1px solid yellow; border-bottom:2px solid
yellow; margin-top:1.5em;} /* orange border */

As far as I can tell from much web-reading and a couple of books this should
do it.

Any thoughts?
 
T

Trevor L.

Cimbian said:
I have created a CSS site that has a footer spanning the bottom of the
viewport and whilst I have managed to glue it ot the bottom I have
another div that is behind it even though I think I have set-up the
container properly.

the troublesome page is
http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will see
that the bottom of the text in the main pane is obscured.
Click to expand...

It looks fine to me.
(Although I can't see this text:
<b>Geof Gibson, Recurve archer</b>)

Perhaps, if this is the problem, it has to do with the positioning of the
<div>s, in order:
relative
not specified
relative
absolute

You may need someone like Murray to answer this one

BTW,
Your CSS intrigues me

What do these do:
voice-family: "\"}\"";
voice-family: inherit;

html>body #meta_wrapper { height: auto; }

I haven't seen these before.
I assume voice-family has to do with software that reads the text
inherit is one I don't know about, as is html>body......

But of course maybe I should also be reading all the good books :))
 
C

Cimbian

Trevor,

Thanks for highlighting the bit I forgot to mention... ;-)

Yes the proble in that we cannot see the bottom of the text, in this case:
<b>Geof Gibson, Recurve archer</b>

It is strange, for sure and I know an answer exists, I just can't work it out.

Maybe I should stick to archery ;-)

BTW: I know that it is busted in Netscape due to the box-model problem and I
will fix this one when I get the time but this viewport problem is the one
that is vexing me right now.
 
S

Stefan B Rusynko

Caused by your nested divs and the div/styles overlappling
- footer overlaps the the 2 above it

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Trevor,
|
| Thanks for highlighting the bit I forgot to mention... ;-)
|
| Yes the proble in that we cannot see the bottom of the text, in this case:
| <b>Geof Gibson, Recurve archer</b>
|
| It is strange, for sure and I know an answer exists, I just can't work it out.
|
| Maybe I should stick to archery ;-)
|
| BTW: I know that it is busted in Netscape due to the box-model problem and I
| will fix this one when I get the time but this viewport problem is the one
| that is vexing me right now.
|
|
|
| "Trevor L." wrote:
|
| > Cimbian wrote:
| > > I have created a CSS site that has a footer spanning the bottom of the
| > > viewport and whilst I have managed to glue it ot the bottom I have
| > > another div that is behind it even though I think I have set-up the
| > > container properly.
| > >
| > > the troublesome page is
| > > http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will see
| > > that the bottom of the text in the main pane is obscured.
| >
| > It looks fine to me.
| > (Although I can't see this text:
| > <b>Geof Gibson, Recurve archer</b>)
| >
| > Perhaps, if this is the problem, it has to do with the positioning of the
| > <div>s, in order:
| > relative
| > not specified
| > relative
| > absolute
| >
| > You may need someone like Murray to answer this one
| >
| > BTW,
| > Your CSS intrigues me
| >
| > What do these do:
| > voice-family: "\"}\"";
| > voice-family: inherit;
| >
| > html>body #meta_wrapper { height: auto; }
| >
| > I haven't seen these before.
| > I assume voice-family has to do with software that reads the text
| > inherit is one I don't know about, as is html>body......
| >
| > But of course maybe I should also be reading all the good books :))
| > --
| > Cheers,
| > Trevor L.
| > Website: http://tandcl.homemail.com.au
| >
| >
| >
 
C

Cimbian

Stefan,

Thanks for replying.

I'm sorry but I don't understand what you are saying though as the only div
that is open when I open the footer div is the meta_wrapper.

I close the main_content_area div that has the clearfix class before I open
the footer div.
 
C

Cimbian

Now this is getting WEIRD!

I thought that I would upload the page with the HTML optimization switched
off so your helpful people could read the source and... Hey presto it now
works okay!

Weird!!

FP2003
 
S

Stefan B Rusynko

But your absolute positioning (in your style sheet) forces it over the other 2 divs (hiding BA_Main_Full_Width and
BA_small_picture_right)
- make it relative

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Stefan,
|
| Thanks for replying.
|
| I'm sorry but I don't understand what you are saying though as the only div
| that is open when I open the footer div is the meta_wrapper.
|
| I close the main_content_area div that has the clearfix class before I open
| the footer div.
|
|
|
|
| "Stefan B Rusynko" wrote:
|
| > Caused by your nested divs and the div/styles overlappling
| > - footer overlaps the the 2 above it
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
| > _____________________________________________
| >
| >
| > | Trevor,
| > |
| > | Thanks for highlighting the bit I forgot to mention... ;-)
| > |
| > | Yes the proble in that we cannot see the bottom of the text, in this case:
| > | <b>Geof Gibson, Recurve archer</b>
| > |
| > | It is strange, for sure and I know an answer exists, I just can't work it out.
| > |
| > | Maybe I should stick to archery ;-)
| > |
| > | BTW: I know that it is busted in Netscape due to the box-model problem and I
| > | will fix this one when I get the time but this viewport problem is the one
| > | that is vexing me right now.
| > |
| > |
| > |
| > | "Trevor L." wrote:
| > |
| > | > Cimbian wrote:
| > | > > I have created a CSS site that has a footer spanning the bottom of the
| > | > > viewport and whilst I have managed to glue it ot the bottom I have
| > | > > another div that is behind it even though I think I have set-up the
| > | > > container properly.
| > | > >
| > | > > the troublesome page is
| > | > > http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will see
| > | > > that the bottom of the text in the main pane is obscured.
| > | >
| > | > It looks fine to me.
| > | > (Although I can't see this text:
| > | > <b>Geof Gibson, Recurve archer</b>)
| > | >
| > | > Perhaps, if this is the problem, it has to do with the positioning of the
| > | > <div>s, in order:
| > | > relative
| > | > not specified
| > | > relative
| > | > absolute
| > | >
| > | > You may need someone like Murray to answer this one
| > | >
| > | > BTW,
| > | > Your CSS intrigues me
| > | >
| > | > What do these do:
| > | > voice-family: "\"}\"";
| > | > voice-family: inherit;
| > | >
| > | > html>body #meta_wrapper { height: auto; }
| > | >
| > | > I haven't seen these before.
| > | > I assume voice-family has to do with software that reads the text
| > | > inherit is one I don't know about, as is html>body......
| > | >
| > | > But of course maybe I should also be reading all the good books :))
| > | > --
| > | > Cheers,
| > | > Trevor L.
| > | > Website: http://tandcl.homemail.com.au
| > | >
| > | >
| > | >
| >
| >
| >
 
S

Stefan B Rusynko

Doesn't work for me
- bottom still hidden

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Now this is getting WEIRD!
|
| I thought that I would upload the page with the HTML optimization switched
| off so your helpful people could read the source and... Hey presto it now
| works okay!
|
| Weird!!
|
| FP2003
|
| "Stefan B Rusynko" wrote:
|
| > Caused by your nested divs and the div/styles overlappling
| > - footer overlaps the the 2 above it
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
| > _____________________________________________
| >
| >
| > | Trevor,
| > |
| > | Thanks for highlighting the bit I forgot to mention... ;-)
| > |
| > | Yes the proble in that we cannot see the bottom of the text, in this case:
| > | <b>Geof Gibson, Recurve archer</b>
| > |
| > | It is strange, for sure and I know an answer exists, I just can't work it out.
| > |
| > | Maybe I should stick to archery ;-)
| > |
| > | BTW: I know that it is busted in Netscape due to the box-model problem and I
| > | will fix this one when I get the time but this viewport problem is the one
| > | that is vexing me right now.
| > |
| > |
| > |
| > | "Trevor L." wrote:
| > |
| > | > Cimbian wrote:
| > | > > I have created a CSS site that has a footer spanning the bottom of the
| > | > > viewport and whilst I have managed to glue it ot the bottom I have
| > | > > another div that is behind it even though I think I have set-up the
| > | > > container properly.
| > | > >
| > | > > the troublesome page is
| > | > > http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will see
| > | > > that the bottom of the text in the main pane is obscured.
| > | >
| > | > It looks fine to me.
| > | > (Although I can't see this text:
| > | > <b>Geof Gibson, Recurve archer</b>)
| > | >
| > | > Perhaps, if this is the problem, it has to do with the positioning of the
| > | > <div>s, in order:
| > | > relative
| > | > not specified
| > | > relative
| > | > absolute
| > | >
| > | > You may need someone like Murray to answer this one
| > | >
| > | > BTW,
| > | > Your CSS intrigues me
| > | >
| > | > What do these do:
| > | > voice-family: "\"}\"";
| > | > voice-family: inherit;
| > | >
| > | > html>body #meta_wrapper { height: auto; }
| > | >
| > | > I haven't seen these before.
| > | > I assume voice-family has to do with software that reads the text
| > | > inherit is one I don't know about, as is html>body......
| > | >
| > | > But of course maybe I should also be reading all the good books :))
| > | > --
| > | > Cheers,
| > | > Trevor L.
| > | > Website: http://tandcl.homemail.com.au
| > | >
| > | >
| > | >
| >
| >
| >
 
M

Murray

This is a very tough problem. I suggest you table it....

--
Murray
--------------
MVP FrontPage


Stefan B Rusynko said:
Doesn't work for me
- bottom still hidden

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Now this is getting WEIRD!
|
| I thought that I would upload the page with the HTML optimization
switched
| off so your helpful people could read the source and... Hey presto it
now
| works okay!
|
| Weird!!
|
| FP2003
|
| "Stefan B Rusynko" wrote:
|
| > Caused by your nested divs and the div/styles overlappling
| > - footer overlaps the the 2 above it
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| >
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
| > _____________________________________________
| >
| >
| > | Trevor,
| > |
| > | Thanks for highlighting the bit I forgot to mention... ;-)
| > |
| > | Yes the proble in that we cannot see the bottom of the text, in this
case:
| > | <b>Geof Gibson, Recurve archer</b>
| > |
| > | It is strange, for sure and I know an answer exists, I just can't
work it out.
| > |
| > | Maybe I should stick to archery ;-)
| > |
| > | BTW: I know that it is busted in Netscape due to the box-model
problem and I
| > | will fix this one when I get the time but this viewport problem is
the one
| > | that is vexing me right now.
| > |
| > |
| > |
| > | "Trevor L." wrote:
| > |
| > | > Cimbian wrote:
| > | > > I have created a CSS site that has a footer spanning the bottom
of the
| > | > > viewport and whilst I have managed to glue it ot the bottom I
have
| > | > > another div that is behind it even though I think I have set-up
the
| > | > > container properly.
| > | > >
| > | > > the troublesome page is
| > | > > http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will
see
| > | > > that the bottom of the text in the main pane is obscured.
| > | >
| > | > It looks fine to me.
| > | > (Although I can't see this text:
| > | > <b>Geof Gibson, Recurve archer</b>)
| > | >
| > | > Perhaps, if this is the problem, it has to do with the positioning
of the
| > | > <div>s, in order:
| > | > relative
| > | > not specified
| > | > relative
| > | > absolute
| > | >
| > | > You may need someone like Murray to answer this one
| > | >
| > | > BTW,
| > | > Your CSS intrigues me
| > | >
| > | > What do these do:
| > | > voice-family: "\"}\"";
| > | > voice-family: inherit;
| > | >
| > | > html>body #meta_wrapper { height: auto; }
| > | >
| > | > I haven't seen these before.
| > | > I assume voice-family has to do with software that reads the text
| > | > inherit is one I don't know about, as is html>body......
| > | >
| > | > But of course maybe I should also be reading all the good books
:))
| > | > --
| > | > Cheers,
| > | > Trevor L.
| > | > Website: http://tandcl.homemail.com.au
| > | >
| > | >
| > | >
| >
| >
| >
Click to expand...
 
T

Trevor L.

Murray said:
This is a very tough problem. I suggest you table it....
Click to expand...

Cimbian,
I thought Murray would reply at some stage.

Murray,
I assume by "table it", you mean that Cimbian should place all the separate
parts, currently <div>s, in rows of a table?
But out of interest, is there anything wrong with the way the <div>s have
been put together, e.g. the relative and absolute positioning ?
I found it diificult to find any reason why it failed. But as you know, I am
still strugling with how to position <div>s :))
 
M

Murray

That was a bit confusing.

What I meant was to put the attempt on the back burner. It's not an easy
thing to accomplish reliably. To do it, you would have to get involved with
100% height html and body tags, and negative margins, and <shudder> it's
just not worth the effort in my mind.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

CSS Problems 9
from tables to css - I need help 1
please help me fix my code. it will not work in ie but worksperfectly in firefox 5
Heigth stretching problem. FF/IE 2
How to position image displayed from a link? 1
Positioning of image from link - if that makes sense! 3
pages don't work in Firefox? 2
news letter 1

Top