Kompx.com or Compmiscellanea.com

JavaScript + CSS centering

Windows : Internet Explorer 6.0+, Firefox 1.0+, Google Chrome, Opera 9.0+ [ 1 ], Safari 3.1+, SeaMonkey 1.0+.

Linux : Firefox 1.0+, Chromium, Opera 9.0+ [ 2 ], SeaMonkey 1.0+.

Centering content of a web page by means of JavaScript and CSS. A block containing the content of a page is JavaScript + CSS centered horizontally and vertically. Two cases:

1. A block is centered, if screen resolution is equal to or greater than 1024x768 - [ Open demo page ]

2. A block is centered, if screen resolution is equal to or greater than 1024x768 + mouse cursor is moved over a link in an element of the page content - [ Open demo page ]

JavaScript and CSS horizontal and vertical centering. The first case. Step by step.

1. A web page, the part of which is going to be the element the JavaScript + CSS horizontal and vertical centering is to be applied to:

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>JavaScript + CSS horizontal and vertical centering. The first case. Step 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="1.css" />

</head>

<body>

 

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

2. A block element A (grey color) with dimensions declared explicitly, for instance 800 by 500 pixels and with relative positioning is created in the document's body. [ Open demo page ]

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>JavaScript + CSS horizontal and vertical centering. The first case. Step 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="2.css" />

</head>

<body>

<div class="element_A">&nbsp;</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

3. External JavaScript file ( JavaScript code with commentary and explanations ) is prepared for user's web browser and display device capabilities detection, for the necessary manipulations to achieve the horizontal and vertical centering of element A under the specified condition (screen resolution equal to or greater than 1024x768). Link to this external JavaScript file is placed between the <head></head> tags of the XHTML / HTML file. [ Open demo page ]

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>JavaScript + CSS horizontal and vertical centering. The first case. Step 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="3.css" />

<script type="text/javascript" src="3.js"></script>

</head>

<body>

<div class="element_A" id="element_A">&nbsp;</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A = window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

window.onload=centering;

The JavaScript + CSS horizontal and vertical centering, sample page, aggregate result [ Open demo page ] [ Download archive file ].

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>JavaScript + CSS horizontal and vertical centering. The first case. Aggregate result</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="javascript-css-vyravnivanie.css" />

<script type="text/javascript" src="javascript-css-vyravnivanie.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<div class="box">

<div class="site"><span class="sitecontent"><a href="http://www.compmiscellanea.com/" class="sitelink">compmiscellanea.com</a></span></div>

<h1><span class="title"><span class="titlecontent"><a href="javascript-css-centering.htm" class="titlelink">JavaScript + CSS centering</a></span></span></h1>

</div>

</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

/*---------------- element A content ----------------*/

h1 {font-weight: normal; margin: 0px; float: left; font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #fff;}

.box {position: relative; top: 0px; left: 45px; width: 708px; height: 408px; float: left; border: 1px solid #fff; margin-top: 45px;}

.site {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; margin-top: 152px; text-align: center;}

.sitecontent {position: relative; top: 0px; left: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block; text-align: left;}

.title {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; text-align: center;}

.titlecontent {position: relative; top: 0px; left: 0px; width: auto; height: auto; margin: auto; display: table; display: inline-block; text-align: left; word-spacing: 2px;}

a.sitelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #cc0000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.titlelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #cc0000; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

/*---------------- element A content ----------------*/

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A=window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

window.onload=centering;

JavaScript and CSS horizontal and vertical centering. The second case. Step by step.

1. A web page, the part of which is going to be the element the JavaScript + CSS horizontal and vertical centering is to be applied to:

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>JavaScript + CSS horizontal and vertical centering. The second case. Step 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="1.css" />

</head>

<body>

 

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

2. A block element A (grey color) with dimensions declared explicitly, for instance 800 by 500 pixels and with relative positioning is created in the document's body. [ Open demo page ]

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>JavaScript + CSS horizontal and vertical centering. The second case. Step 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="2.css" />

</head>

<body>

<div class="element_A">&nbsp;</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

3. External JavaScript file ( JavaScript code with commentary and explanations ) is prepared for user's web browser and display device capabilities detection, for the necessary manipulations to achieve the horizontal and vertical centering of element A under the specified condition (screen resolution equal to or greater than 1024x768) + for the specified action (moving mouse cursor over a link in element A). Link to this external JavaScript file is placed between the <head></head> tags of the XHTML / HTML file. A link with onMouseOver event handler and with appropriate script is created in the element A. [ Open demo page ]

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>JavaScript + CSS horizontal and vertical centering. The second case. Step 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="3.css" />

<script type="text/javascript" src="3.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<a href="javascript-css-centering.htm" class="link" onmouseover="centering();"> JavaScript + CSS centering </a>

</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999; text-align: center;}

a.link:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #fff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #fff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #cc0000; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #fff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A=window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

The JavaScript + CSS horizontal and vertical centering, sample page, aggregate result [ Open demo page ] [ Download archive file ].

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>JavaScript + CSS horizontal and vertical centering. The second case. Aggregate result</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="javascript-css-vyravnivanie.css" />

<script type="text/javascript" src="javascript-css-vyravnivanie.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<div class="box">

<div class="site"><span class="sitecontent"><a href="http://www.compmiscellanea.com/" class="sitelink">compmiscellanea.com</a></span></div>

<h1><span class="title"><span class="titlecontent"><a href="javascript-css-centering.htm" class="titlelink" onmouseover="centering();" >JavaScript + CSS centering</a></span></span></h1>

</div>

</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

/*---------------- element A content ----------------*/

h1 {font-weight: normal; margin: 0px; float: left; font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #fff;}

.box {position: relative; top: 0px; left: 45px; width: 708px; height: 408px; float: left; border: 1px solid #fff; margin-top: 45px;}

.site {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; margin-top: 152px; text-align: center;}

.sitecontent {position: relative; top: 0px; left: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block; text-align: left;}

.title {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; text-align: center;}

.titlecontent {position: relative; top: 0px; left: 0px; width: auto; height: auto; margin: auto; display: table; display: inline-block; text-align: left; word-spacing: 2px;}

a.sitelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #cc0000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.titlelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #cc0000; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

/*---------------- element A content ----------------*/

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A = window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

JavaScript + CSS horizontal and vertical centering

There is no point in using this method in easy cases, when just an element's static positioning is necessary. It can be done, but it is easier and more reliable to achieve it by CSS centering. But when horizontal and vertical centering is required to start working only under some conditions or after some actions, then the horizontal and vertical centering by means of JavaScript and CSS becomes essential. VBscript or Java can be used instead of JavaScript, but JavaScript and its variation, JScript, work across a wider range of platforms and software, than VBscript; and simpler to implement than a method with Java.

There may be a variety of reasons and methods in using of JavaScript + CSS horizontal and vertical centering, but their essence all comes down to finding conditions, user's web browser and display device capabilities, running of scripts based on information obtained, if a specified condition is detected or a specified action is performed. A script can work directly with an element's CSS properties or to command what external style sheets file is to be used, which will assign new CSS properties for the element. Since case when a horizontal and vertical centering script selects which external style sheets file to use requires certain extra HTML and CSS preparations, it is not discussed here - as a less pure and apparent example of using JavaScript for objects positioning handling by direct CSS properties manipulation.

The simplest case is considered, to demonstrate the very possibility and its principle - dynamic change of an element's position in a browser's viewable area.

The first case

Condition: if screen resolution is equal to or greater than 1024 by 768 pixels, then center the page content horizontally and vertically:

An element A with dimensions declared explicitly is created. A screen resolution is specified - its arbitrary value will be the condition under which a script is to be run, for instance - 1024x768. In case the script finds screen resolution to be equal to or greater than 1024 by 768 pixels, then the rest of the function in the script is started, it determines the measurements (CSS properties assigned in external style sheets) of element A, the width and height of the browser viewable area. Using the numbers obtained, the distance between the left and top edge of the web browser viewable area and the left and top edge of the element A required for centering is calculated. In terms of CSS, it is when the CSS property "left" of the element A is equal to half difference between the width of the web browser viewable area and the width of the element A, and the CSS property "top" of the element A is equal to half difference between the height of the web browser viewable area and the height of the element A.

Since user can resize the web browser window after the page is loaded, the web browser window size is monitored. Each time it is changed, the function centering element A horizontally and vertically is run anew and element A is centered horizontally and vertically again, at the new dimensions of the web browser viewable area.

The second case

Condition: if screen resolution is equal to or greater than 1024 by 768 pixels and if mouse cursor is moved over a link in element A, then center the page content horizontally and vertically:

An element A with dimensions declared explicitly is created. A link with onMouseOver event handler and with appropriate script is created in the element A. Screen resolution is detected - a specified value of it will be the condition under which the script is to be triggered, for instance - 1024x768. When mouse cursor is moved over the link, if screen resolution is equal to or greater than 1024 by 768 pixels, the script is run to determine the measurements (CSS properties assigned in external style sheets) of element A, the width and height of the web browser viewable area. Using the numbers obtained, the distance between the left and top edge of the web browser viewable area and the left and top edge of the element A required for centering is calculated. In terms of CSS, it is when the CSS property "left" of the element A is equal to half difference between the width of the web browser viewable area and the width of the element A, and the CSS property "top" of the element A is equal to half difference between the height of the web browser viewable area and the height of the element A.

Since user can resize the web browser window after the page is loaded, the web browser window size is monitored. Each time it is changed, the function centering element A horizontally and vertically is run anew and element A is centered horizontally and vertically again, at the new dimensions of the web browser viewable area.


[ 1 ]

All in all, it works starting Opera 7.5 as well, but with a shift by a number of pixels.

[ 2 ]

All in all, it works starting Opera 7.5 as well, but with a shift by a number of pixels.


Aliosque subditos et thema

 

Text-based web browsers for Linux

 

Lynx : Links : ELinks : W3m : Netrik : Retawq : Line mode browser When general public Linux distributions came around, web browsing was quite young, but with some way behind it. There were several web browsers already, many of them ported gradually to Linux. Some text-based web browsers were in the first wave. After a while Linux became the main habitat of text-based browsers, where most of them are developed and used. Even if these text-based web browsers are mostly intended not just for Linux, but for various other *nix systems as well. And there are also their ports to plenty of other operating systems for most various platforms. Lynx - / home page / Text-based web browser. Versions for Linux, FreeBSD, Mac OS X, some other *nix systems, DOS, Windows, BeOS, MINIX, QNX, AmigaOS, OpenVMS and classic Mac OS. HTML ( More 1 ) ( More 2 ) Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: lynx.isc.org Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: w3schools.com/browsers/browsers_stats.asp Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: en.wikipedia.org/wiki/Lynx_(web_browser) Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: ebay.com Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: kompx.com/en/elinks.htm Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: twitter.com Links - / home page 1 : home page 2 / Text-based web browser. Versions for Linux, FreeBSD, Mac OS X, some other *nix systems, BeOS, Haiku, OS/2, DOS, Windows.

Float bottom

 

There is no "float: bottom" in CSS, but there is a way to achieve it by some other means. Example: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Code: <div class="box1"> <div class="content1"> <div class="left1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="menu1"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </div> <div class="bottom1">Float bottom</div> </div> CSS. Code: .box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;} .menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;} .bottom1 {position: absolute; bottom: 0px; right: 0px;} /* Extra CSS, just styling the look */ .box1 {color: #ddd; text-align: center;} .content1 {background: #bbb;} .left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;} .menu1 a {color: #ddd; text-decoration: none;} .menu1 a:hover {text-decoration: underline;} .bottom1 {padding: 2%; color: #eee; background: #600;} There is a web page with a div box, containing its content - box1. There are two div boxes inside it: 1. "content1" with the content proper on the left and menu on the right. 2. "bottom1" after the content1.