page height

8,658

Expert Mod 8TB

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.

Sep 1 '08 #2

563

512MB

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

Sep 1 '08 #3

8,658

Expert Mod 8TB

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

Sep 1 '08 #4

563

512MB

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

Sep 1 '08 #5

8,658

Expert Mod 8TB

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

Sep 1 '08 #6

David Laakso

397

Expert 256MB

Have you tried "footerStickAlt" ?
footerStickAlt

Sep 1 '08 #7

563

512MB

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.

Sep 2 '08 #8

8,658

Expert Mod 8TB

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

Sep 2 '08 #9

563

512MB

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

Expand|Select|Wrap|Line Numbers

 
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.css" />
<body>
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="content">Content</div>
</div>
<div id="footer">Footer</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

Sep 2 '08 #10

David Laakso

397

Expert 256MB

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

Huh? No clue. Nevertheless, try:

Expand|Select|Wrap|Line Numbers

 
#wrap {background: blue;} <-------------- :: add

#footer {

width : 100%;<--------------------------- :: add

padding: 10px;<-------------------------- :: delete

padding: 10px 0;<-------------------------- :: add

}

Sep 2 '08 #11

Similar topics

Help with a default page

by: Goober | last post by:

I have the following default.aspx page that works properly. However, what I want to do is to link the graphics within it (that are hard coded now in the default web page) to our corporate...

Error: A page can have only one server-side Form tag.

by: VB Programmer | last post by:

I only have 1 set of <FORM> tags in my HTML file, but I keep getting this error. Any ideas? *********** A page can have only one server-side Form tag. Description: An unhandled exception...

Can't make this page work

by: scottyman | last post by:

I can't make this script work properly. I've gone as far as I can with it and the rest is out of my ability. I can do some html editing but I'm lost in the Java world. The script at the bottom of...

Javascript

Web Page Positioning

by: GaryDean | last post by:

In my old 1.1 apps the default was MS_POSITIONING="GridLayout" and Textboxes and labels and such always had POSITION: absolute; and I never had any distortion when the page was rendered. Life was...

report footer at the bottom of the last page

by: Greg | last post by:

Most suggestions on this topic recommend to use a page footer and make it visible only on the last page. My problem is that the footer is half of the height of a page which means the detail would...

Microsoft Access / VBA

Trying to add an image within a page

by: rsteph | last post by:

I've got some product information pages, with images and text, all setup within a table. I'm trying to add a small image in the upper right hand corner of the content div (where all the important...

HTML / CSS

How paginate page can keep up after the table was sorted

by: osward | last post by:

I had made a table colum sortable and paging the table, following are the code // Display Event List echo "<center>"._EVENTLIST."</center><br>"; $now = Date(Y-m-d); // sort table...

PHP

IE7 refusing to broaden page, FF just fine

by: soluvah | last post by:

Hello Folks, Been trying to widen my site's body from "779" to "1000" so it almost fills the window. IE 7 on windows XP just dismantles the pages and leaves wide gaps between the left column and...

HTML / CSS

Java Script Error in HTML Page

by: imtmub | last post by:

I have a page, Head tag Contains many Scripts and style sheet for Menu and Page. This code working fine and displaying menus and page as i wanted. Check this page for reference....

Javascript

Upload photo in asp.net content page

by: premprakashbhati | last post by:

hi, good evening.. i am going to upload an image in a web form .....for that iam using HTML input(file) control and one web control button i.e., Upload_Button() here is the code ...its work fine...