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


Arachne web browser. Installing and setting up for dial-up internet connection


A : Installing Arachne web browser on a disk created in RAM - Arachne runs the fastest this way. RAM size should allow for a RAM disk of 6 MB or more. In order to install and set up Arachne web browser for dial-up internet connection, there have to be several programs at hand: 1. Arachne web browser [ Download ] 2. If Arachne web browser is to be used for surfing web pages with character encoding other than Latin for West European languages, visit www.glennmcc.org/apm/ to find available character set packages and download the necessary one. 3. Mouse driver, mouse.com for instance [ Download ] 4. Archivers. For example, PKZIP [ Download ] and PKUNZIP [ Download ] 5. If it is not MS-DOS 6.0+ to be used, QEMM97 [ Download ] 6. If it is not MS-DOS 6.0+ to be used, TDSK [ Download ] Installing and setting up Arachne web browser, step by step: 1. Create a RAM disk. Which drive letter will be assigned to it comes from the assumption that A: and B: go to floppy drives (even if there is only one, both letters will be reserved anyway), C: goes to the first active primary MS-DOS partition on the first physical hard disk. If there are more disks, then there will be as many letters used consecutively as to name them all. Unless there are no devices installed using DRIVER.SYS or similar drivers, the next drive letter will be assigned to the RAM disk. In order to be sure, after having the relevant string for making RAM disk added to CONFIG.SYS (See below), computer could be restarted and what letter is assigned to the RAM disk checked by experiment. In this case, it is E: Depending on RAM size it needs to be decided how many megabytes can be reserved for RAM disk. Basically, the more the better. Since, for instance, web browser cache is going to swell during prolonged and intensive use within a session. In this example the RAM disk is 12 000 KB. The maximum size for RAMDRIVE.SYS MS-DOS driver is 32 767 KB, the one of TDSK - 64 MB. In order to create such a disk, the string has to be added somewhere in the middle of CONFIG.SYS as follows: DEVICE=C:\DOS\RAMDRIVE.SYS 12000 512 512 /E 2. Create a folder, for example C:\DRIVERS\. Put there a mouse driver, for instance mouse.com 3. Add a string starting mouse driver to AUTOEXEC.BAT. Specify there the full path to the driver, may be any: LH C:\DRIVERS\MOUSE.COM 4. Run MemMaker or OPTIMIZE from QEMM97 to optimize base memory management. If it is MemMaker, press Enter at any suggestion - MemMaker will handle it itself. Computer is going to restart several times, each time MemMaker will be re-running - again nothing, just Enter, is a safe choice. If it is QEMM97 (specifically OPTIMIZE), then there is going to be several restarts too and each time just pressing Enter is OK. 5. Start installation of Arachne web browser on RAM disk. In the case discussed it is E: A195GPL.EXE Press Y to continue: Press N to specify the path to the folder Arachne web browser is to be installed in: Specify the path to the folder Arachne web browser is to be installed in. In the case discussed it is E:\ARACHNE\.

Internet Explorer 3. Screenshots 1


Internet Explorer 3 running under Windows 7 (32-bit). Screenshots 1. Internet Explorer 3: windows.microsoft.com/en-US/windows/upgrade-your-browser Internet Explorer 3: w3schools.com/browsers/browsers_stats.asp Internet Explorer 3: en.wikipedia.org/wiki/Internet_Explorer_3 Internet Explorer 3: ebay.com Internet Explorer 3: kompx.com/en/netscape-3-screenshots-1.htm Internet Explorer 3: twitter.com Download Internet Explorer 3: a pack, containing 3.0, 4.01, 5.01, 5.5, 6.0 versions of Internet Explorer. During installation process it is possible to select which one version only to install or install several or install all. It is very much probable that all versions, except Internet Explorer 3, will not work even under 32-bit Windows 7. So if you would like to try all older Internet Explorers you should have Windows XP or earlier installed. Internet Explorer 3 functions under 32-bit Windows 7 pretty well though.