?
Solved

Setting the height of a container and position of a footer

Posted on 2013-02-04
8
Medium Priority
?
249 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

765 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