Solved

Setting the height of a container and position of a footer

Posted on 2013-02-04
8
242 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
 
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
Industry Leaders: 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!

 

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

Independent Software Vendors: 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

Suggested Solutions

Title # Comments Views Activity
CSS for <center> 14 49
Hta File displays dynamic File names 4 65
How to get chosen background-color on every line? 10 44
asp.net, radiobuttonlist, c# 3 69
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

734 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