bottom

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value auto
Inherited No
Applied To all elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom

Description
It determines bottom border position of a contained element without a thickness of frameworks and spaces. Coordinates readout depends on parameter position. It usually accepts value relative (relative position) or absolute (absolute position).
Readout is conducted from a bottom border of an element starting position (fig. 1) at relative positioning of an element. At absolute is conducted concerning a bottom border of a document window (fig. 2).




Syntax

bottom: value | percent | auto

Arguments
Any units of length accepted in CSS are applied as values, for example pixels (px), inches (in), points (pt), etc. Value of parameter bottom can be negative. In this case superpositions of different elements against each other are possible. If you specify the value in percent, the element position will be calculated depending on parental element height. The argument auto does not change the element position.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>bottom</title>
  <style type="text/css">
   #layer {
    bottom: 20px; /* Distance from the bottom margin of the browser window */
    position: absolute; /* Absolute positioning */
    background: #f0f0f0; /* Background color */
    padding: 7px; /* Areas around the text */
    border: solid 1px black; /* Frame parameters */
   }
  </style>
 </head> 
 <body> 
 
  <div id="layer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div> 
 
 </body>
</html>

The result of this example is shown on the figure 3


Object model

[window.]document.getElementById("elementID").style.bottom