page height

[pradeepjain]

Hello guys,
I am working on a site where in i have a container of width 90% within which all header footer and content area comes.I have a small problem with footer that is when i have content more the footer goes down which is ok.but when i have very small content say 5 lines the footer comes up this is the main problem.when the content is less then a page height i want the footer to be at the bottom of the page..is there any way to do this .say some min-height or something like that.


Thanks,
Pradeep

[Dormilich]

is there any way to do this .say some min-height or something like that.

there's the min-height css property (though IE < 7 fails there). values may be of length or percentage.

[pradeepjain]

there's the min-height css property (though IE < 7 fails there). values may be of length or percentage.

i am not able to set in percentages ..i want to set in % bcos to support all browsers..how to do it

[Dormilich]

% - Defines the minimum height for the element in % of the containing block

for min-height to work with % you need a container element (e.g. body) from which the min-height is calculated (but obviously you need a numeric value to set the containers height itself). So you can't stretch a %-defined element over the parent element's border (you also can't stretch the parent itself, resp.)

note: same goes for height

[pradeepjain]

for min-height to work with % you need a container element (e.g. body) from which the min-height is calculated (but obviously you need a numeric value to set the containers height itself). So you can't stretch a %-defined element over the parent element's border (you also can't stretch the parent itself, resp.)

note: same goes for height

i have 2 elements body and container which is inside body where all data comes......

[Dormilich]

i have 2 elements body and container which is inside body where all data comes......

your problem (as I understand) was that you want the footer at the bottom of the page even when there's hardly any content. To accomplish that you have to stretch the body all the way down, but the body only wraps around the existing text/content (if no numeric height is set). Unfortunately you can't do that with percentage height (because then you need a wrapper element of defined (numeric) height).
The only solution for this I know is to determine the inner height of the browser window and assign that value to body/the container. You also may use absolute positioning (you must take care when to switch back to normal, otherwise the footer will sit over your content).

to show where body and the container end, temporarly assign a border to both and experiment with numeric/percentage (min-)heights

hope that is of more help

[David Laakso]

Have you tried "footerStickAlt " ?
footerStickAlt

[pradeepjain]

Guys i am not really able to achieve what i need..the layout that i am using is

http://www.cssplay.co.uk/layouts/3cols.html


so if u can show me what i need to add in css and where i will be great full.bcos once i see some example i wll be able to understand better.

[Dormilich]

I'd say, just add the rules according to the given example.
or applied to the example of your link:
- copy the css rules
- rename #nonFooter to #container
- rename #content to #inner
- put everything between the closing #container div tag and the closing body tag in one div and rename #footer it to it
- adjust padding and margin to your needs

regards

[pradeepjain]

hey guys i used this

http://bonrouge.com/hcf-fluid.php
for my problem..its working but some small problems plzz help me out.

I am posting my css and html code'
this is css

html {height:100%;}
body {
margin:0;
padding:0;
height:100%;
background-color:orange;
}
#wrap {
width:90%;
margin-left:auto;
margin-right:auto;
min-height:100%;
position:relative;
border:1px solid silver;
padding-left:1px;
padding-right:1px;
}
* html #wrap {height:100%}
#inner-wrap {
background-color: blue;
padding-bottom:80px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
* html #inner-wrap {
height:1px;
}
#footer {
position:absolute;
bottom:0;
height:80px;
background-color: #333333;
width:100%;
padding:-10px;
}
#header {
height:80px;
background-color: #333333;
}
 
 

this is html

[HTML]<html>
<head>
<link rel="stylesheet " type="text/css" href="style1.cs s" />
<body>
<div id="wrap">
<div id="header">Hea der</div>
<div id="inner-wrap">
<div id="content">Co ntent</div>
</div>
<div id="footer">Foo ter</div> </div>
</body>
</html>[/HTML]


wht the problem is that the blank portion where no content is there i.e the gap b/w the content and footer is taking the color of the body..how to make it not take the color.and yeah in the bottom of the page in the footer its not showing the right side border as its stretching full width .plzz have a look at code and tell wht changes shld be made.

and ya i did not understand the need for padding-bottom:80px in #inner-wrap should the padding set as the height of the footer and also the need for #inner-wrap:after



thanks,
Pradeep