Web page layout: Displaying content appropriately based on screen size?

[Robtyketto]

My web-page which can be seen on the URL link within this post.

Consists of a header, navigation panel, left column (text), right column(pictures) and a footer (All of these hav div tags assigned to them).

The footer is set to be displayed 20pixels from the bottom using the code below:-

#footer 
{
	border: 1px solid #000000;
	background: #CC99FF;
	text-align: center;
	position: absolute;
	bottom: 20px;
	right: 20px;
	left: 20px;
}

However, if the content of right/left columns is more than can be displayed on the current browser window the scroll bar is present and the footer isn't the last element to be displayed, as the contents of the left and right columns is displayed underneath.

If the footer is displayed directly after the content of left/right columns then the footer could potentially not be positioned 20 pixels up from the bottom of the screen.

The screenshot should hopefully explain this better than my words:-http://i140.photobucket.com/albums/r13/robtyketto/catsitenonfullscreen.png

I played around with overflow option without success, can anyone assist in providing possible solutions so the footer is always displayed at the bottom of the page?

Also I do not know if what I want is actually possible, which I guess to summarise is the text to always be clearly visible and a foot at the bottom of the page independant of the current browser display size.

Thanks and hope that made sense
Rob

[roryt]

Firstly, unless you really no what you're doing do not set anything as position: absolute.

You should put your html code for your footer right at the end of your html document, ie just before </body>. Then just before it put this html:

<div class="clear"></div>

and add this css:

.clear {clear: both;}

Also clear all the absolute position properties, ie position + left + right + bottom. and add margin-bottom: 20px;
I believe this will fix your issue.

If it doesn't please post your entire css and html and a link to your page. And I will definitely solve it for you!

Hope that helps.

[Robtyketto]

Thanks for the advice and input, much appreciated.

I have cleared the settings from the previous divisions, I've attached the external css and xhtml files (Zipped) and images (zipped).

It's for a college course, hence the use of tables (I wouldn't use them in the real world), strange colours and simple layout.

I've haven't hosted it anywhere yet either.

Cheers
Rob

[almostbob]

for a layout like yours
add margin-bottom to the leftcol rightcol css, large enough to accomodate the height of the footer,
the page will always scroll down to display the last line of text, in the largest column,
above the footer

[Robtyketto]

for a layout like yours
add margin-bottom to the leftcol rightcol css, large enough to accomodate the height of the footer,
the page will always scroll down to display the last line of text, in the largest column,
above the footer

Thanks for the input I used the following css and the problem still occurs:-

#leftcol 
{
	position: relative;
	margin-right: 250px; 
	margin-bottom: 100px;
}

#rightcol
{
	position: relative;
	float: right;
	width: 230px;
	margin-bottom: 100px;
}

I experimented with the position value too, including removing them altogether. All changes had the same end result.

[cfajohnson]

I played around with overflow option without success, can anyone assist in providing possible solutions so the footer is always displayed at the bottom of the page?

Also I do not know if what I want is actually possible, which I guess to summarise is the text to always be clearly visible and a foot at the bottom of the page independant of the current browser display size.

It is barely possible, and to do it requires making an assumption about the height of the footer.

The closest you can easily do is something like this: http://cfaj.freeshell.org/testing/Robtyketto/; it works in Firefox, but not in IE6 (I don't know about IE7+).

[Robtyketto]

It is barely possible, and to do it requires making an assumption about the height of the footer.

The closest you can easily do is something like this: http://cfaj.freeshell.org/testing/Robtyketto/; it works in Firefox, but not in IE6 (I don't know about IE7+).

It does work in IE7 the size of the footer isn't always the exact same as the header. But I think its close enough.

Interesting to see how you had used the footer css settings having another div, never seen that before but now understand how it works.

Some of the other settings had me perplexed, so I'm experimenting.

Thanks, greatly appreaciated

[cpeeyush1]

first of all for a better web design you should use % rather than the px or i think you can use em also
so your web pages can be easily fit in any screen resolutions.

try this if this works otherwise you should use float property for your left/right coloums.

i thnk it will help
-PC(INDIA)

[MidiMagic]

You are trying to do something that can't be done in a way that works on all browsers, screen resolutions, and window sizes. There is no provision in the design of the internet for a footer that is at the bottom of the screen. You are wasting your time trying to do it.

The internet is NOT designed to display a page in the way a Windows program displays it. It is designed to present things in a continuous web of material from the top of the screen until the information runs out.