Footer, the beast

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 ,
and every column and container at "100%" or "auto" I see that the
container

Re: Footer, the beast

On Aug 24, 10:20 am, joker wrote:
> 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 ,
> and every column and container at "100%" or "auto" I see that the
> container

Re: Footer, the beast

joker wrote:
> 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 ,
> and every column and container at "100%" or "auto" I see that the
> container

Re: Footer, the beast

>
> 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

Re: Footer, the beast

joker wrote:
>> 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

Re: Footer, the beast

joker wrote:
>> 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

Re: Footer, the beast

joker wrote:
> 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 ,
> and every column and container at "100%" or "auto" I see that the
> container

Re: Footer, the beast

Edwin van der Vaart wrote:
> joker wrote:
>>> 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

Re: Footer, the beast

Kevin Scholl wrote:
>
> 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


--
www.daszeichen.ch
remove nixspam to reply

Re: Footer, the beast

The question is that the "container

Re: Footer, the beast

Bernhard Sturm wrote:
> Kevin Scholl wrote:
>>
>> 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.

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/
kscholl@comcast.DELETE.net
------------------------------------------------------
Information Architecture, Web Design and Development
------------------------------------------------------
We are the music makers, and we are the dreamers of
the dreams...
======================================================

Re: Footer, the beast

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;

}

Re: Footer, the beast

joker wrote:
> The question is that the "container

Re: Footer, the beast

joker wrote:
> 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">

Re: Footer, the beast

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