Solved

Setting the height of a container and position of a footer

Posted on 2013-02-04
8
237 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
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 

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

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

773 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