Solved

Setting the height of a container and position of a footer

Posted on 2013-02-04
8
238 Views
Last Modified: 2013-02-06
Hi,

I am a bit new to CSS layout and I am having a little difficulty with two things (see attached file).

1) I need the height of the main container to always stretch down the full height of the screen (irrespective of the amount of content included).

2)  I need the footer to be fixed at the base of the screen (again, irrespective of the content).


I'd really appreciate some help on this as I am going round in circles.

Thank you.
Website.txt
0
Comment
Question by:Andy Brown
  • 4
  • 3
8 Comments
 
LVL 9

Expert Comment

by:user_n
ID: 38851754
0
 

Author Comment

by:Andy Brown
ID: 38851784
Thanks for your quick response (very much appreciated).

I'm not quite sure what that link is telling me (i'm pretty new to CSS)?
0
 
LVL 9

Expert Comment

by:user_n
ID: 38851801
position:absolute;-says that the element wont move from it's position
left:0px; - it would be on 0pixels from left of the browser window
top:0px; - it would be on 0 pixels from top of the browser window
z-index:-1; puts the image behind the text
Here the css is described:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Andy Brown
ID: 38851821
Still struggling I'm affraid.  Is there any chance that you could take a look at the text file and give me a pointer (sorry to be a pain).

Thanks (again).
0
 
LVL 9

Accepted Solution

by:
user_n earned 250 total points
ID: 38851841
you can try  absolute position and height 90% for the main container. and absolut position for the footer and 10% height and see whether it is what you want to achive
0
 

Author Comment

by:Andy Brown
ID: 38851849
Thank you - I'll give it a go.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
ID: 38851968
Why do you want the dic to stretch to the bottom of the viewport if there is nothing in it?  If there is nothing for the user to see it will just look broken.  Not that it matters, using height height 100% will break and screw up the rendering in some browser anyway.

As for the footer.  position absolute will not do what you want, it will position to the document not the screen.  for a footer at the bottom of the screen use:

footer {position:fixed; bottom 0px;}


Cd&
0
 

Author Closing Comment

by:Andy Brown
ID: 38859578
Thanks guys, your suggestions pointed me in the right direction.

All the best

Andy
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Select case on click 3 19
Html Table Looping (part 2) 5 27
Copying table data to one another 15 29
Prevent a display:none image from downloading on page load 5 34
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question