Positioning to bottom in CSS?

[Montycarlo]

How can I position a table to the bottom of the page?
Using the following class:

Code: Select all

.footing {
   Position:absolute;
   top:100%;
}

Will position it at the bottom, but it will only position it at the bottom without scrolling, so if I have a webpage that is about two pages long (One page fits the screen) then it will position it at the start of page 2 and will overlap anything previously there. How can I use the relative property to achieve the same result?

[Gillian]

Where exactly in the source do you have the footer? If it helps, here's this site's footer.

Code: Select all

#footer
{
position: relative;
height: 2.0em;
clear: both;
padding-top: 5.0em;
background: #EFF3F6 url('images/border2.gif') repeat-x 0em 2.5em;
font-size: 0.8em;
}

#footer .left
{
position: absolute;
left: 2.0em;
bottom: 1.2em;
}

#footer .right
{
position: absolute;
right: 2.0em;
bottom: 1.2em;
}

It is right above the </body> tag

[Montycarlo]

I find it ironic that your footer is defined before anything else.

Code: Select all

.footing {
   Position:absolute;
   bottom:0px;
}

Works exactly how I'd like it to apart from one downfall; it acts like there is no scrollbar.
I'd like it so the footer is placed on the bottom of the page exactly like if some text was in a table with the table's y positioning value set to "baseline".
Do you know any way of achieving this?

[Gillian]

Err I suck at CSS but try to use a DIV instead of a class and also don't use Position:absolute; but try relative.

[Montycarlo]

I didn't know there was a different between using the div tag and the class, merely that one was for grouping and the other for a singular object.
What is the difference?

[Gillian]

Divs are for areas around a site and classes are more for styles like font, color, etc...

Example, the footer on the homepage is one div, inside that is 2 classes, one for the left text and one for the right (contact link).

[Montycarlo]

According to the O’Reilly HTML Reference, “the DIV element gives structure and context to any block-level content in the document. Each DIV element becomes a generic block-level container for all content within the required start and end tags.”

Going by that and your own explanation, the DIV tag is used as a generic label, while more specific labels may be inside the DIV tags, so using either would achieve exactly the same thing.

[Gillian]

According to the O’Reilly HTML Reference, “the DIV element gives structure and context to any block-level content in the document. Each DIV element becomes a generic block-level container for all content within the required start and end tags.”

Going by that and your own explanation, the DIV tag is used as a generic label, while more specific labels may be inside the DIV tags, so using either would achieve exactly the same thing.

DIVS are used for main blocks on a page like the header, main content body, side panel, footer etc... They are containers that you only place once to make up the template. Classes are used for things that can be placed multiple times on the site such as <p>, <a> <img> etc.. Sure you can do the same with classes and leave divs out completely, but DIVS are made for a reason.

[Montycarlo]

Ah I see.
Some googling found a solution, I needed to use

Code: Select all

min-height:
And
margin-bottom:

which works perfectly.
Thankyou so much for your help :]
Anything I can do in return?

[Gillian]

Good to see it working, Sorry I wasn't much help

[Montycarlo]

Haha no worries, at least I learned something from you.

[Pepsi]

I always learn from Gilly xP

[jonlin]

lol i wish i understood any of that >.<

[Pepsi]

The CSS part or the learning part?

[jonlin]

the random programming language part idk

Btw could someone help me learn html?

[Montycarlo]

the random programming language part idk

Btw could someone help me learn html?

Adobe Dreamweaver is all you will need.

[Gillian]

the random programming language part idk

Btw could someone help me learn html?

Adobe Dreamweaver is all you will need.

Dreaweaver is a WYSIWYG editor, it wont 'teach' you html because you can just draw a line and spawn a table.. What you really need is Notepad ++. (I use it to build this site).

[Montycarlo]

I agree with your point that it won't teach him html, but I'm not sure if he actually wants to learn it or use it to create a quick site.
Also, there is the 'Code only' button which will view only the code, which you can freely edit.

[Pepsi]

Its better to create your own using NotePad++

[jonlin]

a) is just notepad ok?
b) i actually am doin this site to learn html...