Kompx.com or Compmiscellanea.com

CSS centering floated elements

Windows : Internet Explorer 5.5+ [ 1 ], Firefox 1.0+, Google Chrome, Opera 9.52+ [ 2 ], Safari 3.1+, SeaMonkey 1.0+ [ 3 ].

Linux : Firefox 1.0+, Chromium, Opera 9.52+ [ 4 ], SeaMonkey 1.0+ [ 5 ], NetSurf 3.0+.

Centering an inline block containing several inline elements. The block is centered horizontally - [ Open demo page ].

Sometimes there is a need to have a centered group of floated elements, which is to serve as a title or a pagination box. Since this group of floated elements is going to be used as a title for content blocks of various dimensions or pagination box may grow or shrink in its size, then the width of the group of floated elements is to vary unpredictably as well. So a method of centering based on using a certain known width of the box is not going to work.

And as an extra to the task there is a desirable condition: the title or pagination box has to be centered once and for all at the time of the box creation, so that this group of floated elements may be reused without any extra work over it: just place the complex where you need it and put the text or / and images you want to inside it - the group is centered anyway.

This problem can be solved by several methods using several technologies: CSS, CSS + JavaScript, CSS + HTML (<table></table> tags system). The CSS centering floated elements is the most simple and reliable. So, here a pure CSS centering of floated elements is discussed.

CSS centering floated elements:

1. First, a more simple case, css centering of a title box consisting of floated elements: images and text:

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>CSS centering floated elements: 1</title>

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

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

</head>

<body>

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text">CSS centering floated elements</span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

</body>

</html>

CSS. Code:

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

body {background-color: #fff; margin: 0px; height: 100%; text-align: center; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #006;}

.box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border: solid #ccc 1px;}

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

.title-imgs {float: left;}

.title-text {float: left;}

CSS centering floated elements: [ Open demo page ].

2. Now the full example of css centering floated elements: three pages with title boxes consisting of floated elements - images and text and pagination boxes consisting of floated elements - text, part of it changing its size when clicking from one page to another:

HTML / XHTML. Page 1. 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>CSS centering floated elements: 2. Page 1</title>

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

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

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="css-centering-floated-elements.htm" class="title-text-link">CSS centering floated elements</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

There are situations, when there is a need to have a centered group of floated elements, which is to serve as a title or a pagination box. Since this group of floated elements is going to be used as a title for content blocks of various dimensions or pagination box may grow or shrink in its size, then the width of the group of floated elements is to vary unpredictably as well. So a method of centering based on using a certain known width of the box is not going to work.
</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Page:</span>

<span class="pagination-box-numbers-links-visited">1</span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-2.htm" class="pagination-box-numbers-links">2</a></span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-3.htm" class="pagination-box-numbers-links">3</a></span>

</span>

</div>

</div>

</div>

</body>

</html>

HTML / XHTML. Page 2. 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>CSS centering floated elements: 2. Page 2</title>

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

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

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="css-centering-floated-elements.htm" class="title-text-link">CSS centering floated elements</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

And as an extra to the task there is a desirable condition: the title or pagination box has to be centered once and for all at the time of the box creation, so that this group of floated elements may be reused without any extra work over it: just place the complex where you need it and put the text or / and images you want to inside it - the group is centered anyway.
</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Page:</span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-1.htm" class="pagination-box-numbers-links">1</a></span>

<span class="pagination-box-numbers-links-visited">2</span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-3.htm" class="pagination-box-numbers-links">3</a></span>

</span>

</div>

</div>

</div>

</body>

</html>

HTML / XHTML. Page 3. 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>CSS centering floated elements: 2. Page 3</title>

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

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

</head>

<body>

<div class="all">

<div class="content">

<div class="box">

<span class="title-box">

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

<span class="title-text"><a href="css-centering-floated-elements.htm" class="title-text-link">CSS centering floated elements</a></span>

<img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" />

</span>

</div>

<div class="content-text">

This problem can be solved by several methods using several technologies: CSS, CSS + JavaScript, CSS + HTML (<table></table> tags system). The CSS centering floated elements is the most simple and reliable. So, here a pure CSS centering of floated elements is discussed.
</div>

<div class="pagination-box">

<span class="pagination-box-all">

<span class="pagination-box-text">Page:</span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-1.htm" class="pagination-box-numbers-links">1</a></span>

<span class="pagination-box-numbers"><a href="css-centering-floated-elements-demo-page-full-2.htm" class="pagination-box-numbers-links">2</a></span>

<span class="pagination-box-numbers-links-visited">3</span>

</span>

</div>

</div>

</div>

</body>

</html>

CSS. Code:

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

body {background-color: #fff; margin: 0px; height: 100%; text-align: center; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #006;}

.all {position: relative; left: 0px; top: 0px; height: auto; width: 100%; margin-top: 10px; padding-bottom: 10px; float: left; clear: both; background-color: #fff;}

.content {position: relative; top: 0px; left: 0px; width: 800px; height: auto; text-align: left; margin-left: auto; margin-right: auto; background-color: #fff; padding: 6px 15px 15px 15px;}

.box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border-bottom: solid #ccc 1px; padding: 0 0 16px 0;}

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

.title-imgs {float: left;}

.title-text {float: left;}

.content-text {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: justify; margin: 20px 0 23px 0; font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 17px; color: #000000;}

.pagination-box {position: relative; left: 0px; top: 0px; height: auto; width: auto; text-align: center; border-top: solid #ccc 1px; padding: 16px 0 0 0;}

.pagination-box-all {position: relative; left: 0px; top: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block; line-height: 30px;}

.pagination-box-text {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left;}

.pagination-box-numbers {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left; margin: 0 5px 0 5px;}

.pagination-box-numbers-links-visited {position: relative; left: 0px; top: 0px; height: auto; width: auto; float: left; margin: 0 5px 0 5px; font-size: 30px; color: #cc0000; text-decoration: underline;}

a.title-text-link:link {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.title-text-link:visited {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.title-text-link:hover {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #cc0000; text-decoration: none; float: left;}

a.title-text-link:active {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numbers-links:link {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numbers-links:visited {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

a.pagination-box-numbers-links:hover {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #cc0000; text-decoration: underline; float: left;}

a.pagination-box-numbers-links:active {font-family: 'Times New Roman', 'Liberation Serif', serif; font-size: 26px; color: #000033; text-decoration: none; float: left;}

CSS centering floated elements. Aggregate result: [ Open demo page ] [ Download archive file ].


[ 1 ]

Partially Internet Explorer 4.01.

[ 2 ]

Just centering of floated elements works in Opera 9.0+.

[ 3 ]

As well as Mozilla 1.7.1+, Netscape 7.2+. Partially Netscape Communicator 4.7 and Mozilla 1.0.

[ 4 ]

Just centering of floated elements works in Opera 9.0+.

[ 5 ]

As well as Mozilla 1.7.1+, Netscape 7.2+. More or less Dillo 2.2.1+. Partially Netscape Communicator 4.7 and Mozilla 1.0.


Aliosque subditos et thema

 

Windows console applications

 

Some time ago text-based applications were the only form of software of average end user computer experience. As well as after the graphical user interface programs started to become widespread, console applications used to retain their strong positions. But gradually GUI software virtually superseded text-based applications in daily use of the average end user. However, even now there are console programs that can more or less compete with software of graphical user interface, be useful for the average user to solve various problems and fulfill numerous tasks on modern computers. Windows console applications. File managers Windows console applications. Multimedia Windows console applications. Web browsers Windows console applications. Text editors Besides file managers, multimedia programs, text editors, web browsers, there are plenty of other text-based programs and utilities for use under Windows: both standalone and those included in MS Windows distributions. For example, ipconfig and netstat for work with network, Windows built-in FTP client useful for some tasks, CommandBurner for command line burning CD / DVD or cdburn with dvdburn from Windows Server 2003 Support Tools for the same, etc.

Web browsers for DOS

 

Arachne : Dillo : DOSLYNX : Lynx : Links : ELinks Web browsers for DOS may be looked at as existing roughly in two categories. Web browsers which can be installed without excessive efforts + work stably within their capability. And the rest of the web browsers of functionality more or less limited or problematic. The major web browsers for DOS include applications with GUI and text-based browsers. The graphical web browsers for DOS are several versions of Arachne - GPL version, Arachne Labs version, Ray Andrews version - and Dillo. As well as DR-WebSpyder based on Arachne and WebSpyder's variation - Lineo Embrowser. Text-based web browsers for DOS are a little bit more numerous: DOSLYNX, lynx, links, elinks. The graphical web browsers for DOS even if being prominent among DOS web browsers for their capabilities are definitely inferior in comparison with major web browsers for Windows, Linux or Mac OS X due to the restrictions of the DOS nature, small user and developer base, some other reasons.