Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 1648

Jan 11th, 2009

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

Expand Post »

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

HTML and CSS Syntax (Toggle Plain Text)

#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/r...fullscreen.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

Robtyketto

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

36 posts
since Mar 2007

Permalink

Jan 11th, 2009

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

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:

HTML Syntax (Toggle Plain Text)
<div class="clear"></div>
<div class="clear"></div>

and add this css:

CSS Syntax (Toggle Plain Text)
.clear {clear: both;}
.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.

Last edited by roryt; Jan 11th, 2009 at 1:55 pm.

roryt

Reputation Points: 178

Solved Threads: 15

Nearly a Posting Virtuoso

Offline

1,282 posts
since Oct 2005

Permalink

Jan 11th, 2009

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

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

Attached Files

	website.zip (1.5 KB, 26 views)
	images.zip (280.0 KB, 21 views)

Robtyketto

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

36 posts
since Mar 2007

Permalink

Jan 11th, 2009

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

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

Last edited by almostbob; Jan 11th, 2009 at 4:54 pm.

almostbob

Reputation Points: 562

Solved Threads: 368

Posting Maven

Offline

2,970 posts
since Jan 2009

Permalink

Jan 11th, 2009

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

Click to Expand / Collapse Quote originally posted by 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

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

HTML and CSS Syntax (Toggle Plain Text)

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

Robtyketto

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

36 posts
since Mar 2007

Permalink

Jan 12th, 2009

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

Click to Expand / Collapse Quote originally posted by Robtyketto ...

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+).

Last edited by cfajohnson; Jan 12th, 2009 at 12:37 am.

cfajohnson

Reputation Points: 25

Solved Threads: 23

Junior Poster

Offline

193 posts
since Dec 2008

Permalink

Jan 12th, 2009

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

Click to Expand / Collapse Quote originally posted by cfajohnson ...

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

Robtyketto

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

36 posts
since Mar 2007

Permalink

Jan 13th, 2009

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

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)

cpeeyush1

Reputation Points: 10

Solved Threads: 2

Light Poster

Offline

29 posts
since Sep 2008

Permalink

Jan 16th, 2009

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

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Address Bar display

Next Thread in HTML and CSS Forum Timeline: Best mouse over image scrolling

DaniWeb Message

Cancel Changes

User Name
Password