HTML and CSS

bottom 20 px from "canvas" NOT screen - possible ?

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2008

Posts: 2

Reputation: AndyTT75 is an unknown quantity at this point

Solved Threads: 0

AndyTT75

Offline

Newbie Poster

bottom 20 px from "canvas" NOT screen - possible ?

Nov 14th, 2008

Hello to all

Can anyone help me ?

I'd like to create a box whose bottom is always 20 px from the bottom of the "canvas" (=the total area rendered by the browser).

This is straightforward when the height of the canvas is less than the screen height

But tricky when the canvas is taller than the screen-height.

Is this possible with CSS ? If so, how ?

Thanks for help !

•

Join Date: Nov 2007

Posts: 596

Reputation: buddylee17 has a spectacular aura about

Solved Threads: 125

buddylee17 buddylee17 is offline

Offline

Posting Pro

Re: bottom 20 px from "canvas" NOT screen - possible ?

Nov 14th, 2008

Yes. Use absolute positioning and set bottom attribute to 20px.

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
position:absolute;
bottom:20px;
position:absolute;
bottom:20px;

Lost time is never found again.
- Benjamin Franklin

•

Join Date: Nov 2008

Posts: 2

Reputation: AndyTT75 is an unknown quantity at this point

Solved Threads: 0

AndyTT75

Offline

Newbie Poster

Re: bottom 20 px from "canvas" NOT screen - possible ?

Nov 16th, 2008

In fact, that was my first appraoch - but it doesnt work

•

Join Date: Nov 2007

Posts: 596

Reputation: buddylee17 has a spectacular aura about

Solved Threads: 125

buddylee17 buddylee17 is offline

Offline

Posting Pro

Re: bottom 20 px from "canvas" NOT screen - possible ?

Nov 16th, 2008

Validate the page with the W3C. You could have an open element or an error causing this to not work.

Just to see what it should do, create a blank html page and put only the following into the body of the document:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<div style="position:absolute; bottom:40px">
This div should be 40px from the bottom.
</div>
<div style="position:absolute; bottom:20px">
This div should be 20px from the bottom.
</div>
<div style="position:absolute; bottom:0">
This div should be at the bottom of the page.
</div>
<div style="position:absolute; bottom:40px">
This div should be 40px from the bottom.
</div>
<div style="position:absolute; bottom:20px">
This div should be 20px from the bottom.
</div>
<div style="position:absolute; bottom:0">
This div should be at the bottom of the page.
</div>