Footer, the beast

J

joker

The Footer is much difficult one to use. I have an HTML page with 3
columns with different heights. If I set the height of <html>,<body>
and every column and container at "100%" or "auto" I see that the
container <div>, that contains these 3 columns, has not the max height
of the tallest column but it has the height of the displayed page and
than the footer is positionated not at the bottom of the page but at
the basis of the displayed page. I have seen a lot of people that
leave to use Footer. I can't understand why it has to be so difficult.
 
T

Travis Newbury

The Footer is much difficult one to use. I have an HTML page with 3
columns with different heights. If I set the height of <html>,<body>
and every column and container at "100%" or "auto" I see that the
container <div>, that contains these 3 columns, has not the max height
of the tallest column but it has the height of the displayed page and
than the footer is positionated not at the bottom of the page but at
the basis of the displayed page. I have seen a lot of people that
leave to use Footer. I can't understand why it has to be so difficult.

It would be pretty easy with tables... ;-)
 
E

Edwin van der Vaart

joker said:
The Footer is much difficult one to use. I have an HTML page with 3
columns with different heights. If I set the height of <html>,<body>
and every column and container at "100%" or "auto" I see that the
container <div>, that contains these 3 columns, has not the max height
of the tallest column but it has the height of the displayed page and
than the footer is positionated not at the bottom of the page but at
the basis of the displayed page. I have seen a lot of people that
leave to use Footer. I can't understand why it has to be so difficult.
You could put those 3 div's in a larger div and the footer under need
the larger div.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de and software-help1.org to duplicate this post.
 
J

joker

You could put those 3 div's in a larger div and the footer under need
the larger div.

uhm....I do that but the problem is not in the width but in the
height. Infact, the max height of the main <div>, where I put all the
others <div>, is equal at the height of the visible screen (from the
address-bar to the horizontal scroll-bar) and not of the entrire html
page. I've tryed to set height at "100%" and "auto" but with no
positive results.
 
J

Jonathan N. Little

joker said:
uhm....I do that but the problem is not in the width but in the
height. Infact, the max height of the main <div>, where I put all the
others <div>, is equal at the height of the visible screen (from the
address-bar to the horizontal scroll-bar) and not of the entrire html
page. I've tryed to set height at "100%" and "auto" but with no
positive results.


How about a URL to what you have tried and a description of what you
wish to change...
 
E

Edwin van der Vaart

joker said:
uhm....I do that but the problem is not in the width but in the
height. Infact, the max height of the main <div>, where I put all the
others <div>, is equal at the height of the visible screen (from the
address-bar to the horizontal scroll-bar) and not of the entrire html
page. I've tryed to set height at "100%" and "auto" but with no
positive results.
Relative height such as "%" and "auto" aren't supported (correct me when
I'm wrong) only absolute heights such as "em" and "px".

So for the footer you need to use absolute positioning. Disadvantage is
when the visitor has the browser full screen, e.g. 1280x1024, the footer
isn't at the bottom of the browser. The same goes for 640x480 and smaller.
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de, velocityreviews, umailcampaign.com,
gthelp.com, webfrustration.com, excip.com and many other to duplicate
this post.
 
B

Bernhard Sturm

joker said:
The Footer is much difficult one to use. I have an HTML page with 3
columns with different heights. If I set the height of <html>,<body>
and every column and container at "100%" or "auto" I see that the
container <div>, that contains these 3 columns, has not the max height
of the tallest column but it has the height of the displayed page and
than the footer is positionated not at the bottom of the page but at
the basis of the displayed page. I have seen a lot of people that
leave to use Footer. I can't understand why it has to be so difficult.
From a practical point of view: where do you define the 'bottom' of a
web page? At the end of your HTML-document? At the bottom of the
viewport? What exactly do you mean by referring to the 'bottom'?
You see: it all boils down to UA viewport dimensions. Where would you
locate your footer on a 480x320px display (iPhone) versus a UA that
accomodates 600px x 1000px?

bernhard
 
K

Kevin Scholl

Edwin said:
>
Relative height such as "%" and "auto" aren't supported (correct me when
I'm wrong) only absolute heights such as "em" and "px".

Uh, okay ... wrong. :)
So for the footer you need to use absolute positioning. Disadvantage is
when the visitor has the browser full screen, e.g. 1280x1024, the footer
isn't at the bottom of the browser. The same goes for 640x480 and smaller.

If I'm understanding what the OP is trying to do here -- a sticky footer
(IOW on a long page, the footer remains at the bottom of the content,
but on a short page that doesn't fill the viewport, the footer will
stick to the bottom of that viewport) -- it takes some rather
interesting CSS. But it CAN be done; see sample and adjust the height of
your viewport:

http://beta.ksscholl.com/jquery/template.html

IIRC the following is whence the basis for the above came:

http://www.themaninblue.com/writing/perspective/2005/08/29/

--

*** Remove the DELETE from my address to reply ***

======================================================
Kevin Scholl http://www.ksscholl.com/
(e-mail address removed)
 
B

Bernhard Sturm

Kevin said:
If I'm understanding what the OP is trying to do here -- a sticky footer
(IOW on a long page, the footer remains at the bottom of the content,
but on a short page that doesn't fill the viewport, the footer will
stick to the bottom of that viewport) -- it takes some rather
interesting CSS. But it CAN be done; see sample and adjust the height of
your viewport:

http://beta.ksscholl.com/jquery/template.html

the example has a glitch when switching JavaScript off (FF Windows XP):
the top logo moves into the content and overlaps the first heading.
A solution would be nice, that doesn't rely on JavaScripting.


bernhard
 
J

joker

The question is that the "container <div>" has not the same height of
the three <div> inside it. I set the "container <div>" height at 100%.
It take the height of the viewport and not of the height of the
tallest <div> inside it. I need to set the height of the "container
<div>" as the height of the tallest <div>.

I have something like this:

<div id="container">
<div id="left div">
..........
</div>

<div id="central div">
..........
</div>

<div id="right div">
..........
</div>
</div>

<div id="footer">
...........
</div>

very standard html page :-(

Footer and container has position:relative.

"Central div" is very tall , more than "left" and "right" divs, but
the "container div" has the height of the viewport and not of the
"central div".
I would want that the "container div" took the height of the "central
div".
 
K

Kevin Scholl

Bernhard said:
the example has a glitch when switching JavaScript off (FF Windows XP):
the top logo moves into the content and overlaps the first heading.
A solution would be nice, that doesn't rely on JavaScripting.

That "glitch" has nothing to do with the solution in question. Turning
off Javascript removes the date stamp in the upper right (since in this
case the date stamp is done with JS rather than a server-side solution),
moving the content up into the masthead. You'll note, however, that the
footer remains stuck to the footer. There is no Javascript involved in
said solution.

--

*** Remove the DELETE from my address to reply ***

======================================================
Kevin Scholl http://www.ksscholl.com/
(e-mail address removed)
 
J

joker

Look at this example:


body {
background-color:black;
text-align:center;
}

html,body{margin:0; padding: 0; height:100%;}


div#Container{
position:relative;
text_align: center;
width: 800px;
height: 100%;
left: 0;
border: 0;
padding: 0;
background-color: #FFF;
}


div#Container_left{
position:absolute;
width: 150px;
height: 100%;
left: 0;
top: 0;
border: 0;
padding: 0;
margin: 0;
background-color: #f00;
color: #fff;
}

div#Container_central{
position:absolute;
left: 0;
top: 0;
text_align: center;
width: 500px;
height: 1000px;
border: 0;
padding: 0;
margin: 0;
margin-left: 150px;
background-color: #0f0;
color: #fff;
}

div#Container_right{
position:absolute;
left: 0;
top: 0;
text_align: center;
width: 150px;
height: 200px;
border: 0;
padding: 0px 0px 0px 50px;
margin: 0;
margin-left: 650px;
background-color: #00f;
color: #fff;
}

div#Footer{
position:relative;
width: 100%;
height: 20px;
left:0;
background-color: #FF5604;
color:white;

}





</style>

</head>
<body>





<div id="Container">
<div id="Container_left">left div</div>
<div id="Container_central">central div</div>
<div id="Container_right">right div</div>
</div>

<div id="Footer">
Footer
</div>

</body>
</html>


what is wrong here? can you see the footer position on your browser?
where is it? I use ie 6xxx.... on xp
 
E

Edwin van der Vaart

joker said:
The question is that the "container <div>" has not the same height of
the three <div> inside it. I set the "container <div>" height at 100%.
It take the height of the viewport and not of the height of the
tallest <div> inside it. I need to set the height of the "container
<div>" as the height of the tallest <div>.

I have something like this:

<div id="container">
<div id="left div">
..........
</div>

<div id="central div">
..........
</div>

<div id="right div">
..........
</div>
</div>

<div id="footer">
..........
</div>

very standard html page :-(

Footer and container has position:relative.

"Central div" is very tall , more than "left" and "right" divs, but
the "container div" has the height of the viewport and not of the
"central div".
I would want that the "container div" took the height of the "central
div".
You mean like this
http://www.evandervaart.nl/templates/columns/3col.html
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de, velocityreviews, umailcampaign.com,
gthelp.com, webfrustration.com, excip.com and many other to duplicate
this post.
 
J

Jonathan N. Little

joker said:
Look at this example:


body {
background-color:black;
text-align:center;
}

html,body{margin:0; padding: 0; height:100%;}


div#Container{
position:relative;
text_align: center;
^^^^^^^^^^
syntax: text-align: center; but not sure why you would do so, centered
text only works for very limited situations, like poetry maybe. Unless
this is a wrong-headed approach to center block elements...
width: 800px;
BAD idea, what happens if the windows is larger or smaller, or the text
size is increased on the client?
height: 100%;
Hmm this will try make the block as tall as the view port, okay what
happens if you have more content than that?

what is wrong here? can you see the footer position on your browser?
where is it? I use ie 6xxx.... on xp

Of course not. You made 'Container' the height of your viewport then
have 'Footer' follow so 'Footer' will always render just below the
bottom of the viewport!

How about:

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Footer</title>

<style type="text/css">
html,body { margin: 0; padding: 0; }
#content { overflow: hidden; background-color: #fdd;}
#footer { clear: both; background-color: #ffd; }
.c1 {background-color: #fdf; float: left; width: 31%; padding: .5em; }
.c2 {background-color: #dff; float: left; width: 31%; padding: .5em;}
.c3 { margin-left: 67%; padding: .5em;}
</style>


</head>
<body>
<div class="c1">
<h2>Column 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer...
</p>
<p>
Suspendisse egestas tempor erat...
</p>
</div>
<div class="c2">
<h2>Column 2</h2>
<p>
Suspendisse potenti. Suspendisse potenti...
</p>

<p>
Pellentesque eros purus, consequat...
</p>

<p>
Morbi mollis. Quisque sollicitudin...
</p>

<p>
Donec vel diam. Integer quis pede...
</p>
<p>
Suspendisse egestas tempor erat...
</p>

<p>
Morbi mollis. Quisque sollicitudin...
</p>

<p>
Donec vel diam. Integer quis pede...
</p>
<p>
Suspendisse egestas tempor erat...
</p>

<p>
Morbi mollis. Quisque sollicitudin...
</p>

<p>
Donec vel diam. Integer quis pede...
</p>
</div>
<div class="c3">
<h2>Column 3</h2>
<p>
Duis dapibus, dolor eget scelerisque...
</p>

<p>
Suspendisse egestas tempor erat...
</p>

<p>
Morbi mollis. Quisque sollicitudin...
</p>

<p>
Donec vel diam. Integer quis pede...
</p>
</div>

<div id="footer">
the footer
</div>
</body>
</html>
 
J

joker

If it can be useful to someone I have resolved removing the absolute
and relative positioning. Now it is all ok.
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top