W3C home > Mailing lists > Public > www-style@w3.org > January 2002

Re: Aligning left/center/right on same line

From: J. David Eisenberg <catcode@catcode.com>
Date: Fri, 4 Jan 2002 12:43:36 -0600 (CST)
To: "Timothy J. Luoma" <luomat@peak.org>
cc: W3 CSS List <www-style@w3.org>
Message-ID: <Pine.LNX.4.33.0201041240400.14938-100000@tengu.host4u.net>
On Fri, 4 Jan 2002, Timothy J. Luoma wrote:

>
> Sorry if this has been asked before.  Searching the archives doesn't seem to
> work.
>
> I'm trying to write HTML4Strict with CSS.
>
> What I would really like to do (and thought I had done before, although I
> cannot find any evidence to support that thought) is position text on the
> same line which is left-justified, centered, and right-justified.
>
> These would be for simple navigational links, such as:
>

This works with IE5 and Mozilla on Linux, but I am not sure it's a "clean"
solution.

<style type="text/css">
<!--
#bottom {
	position: relative;
	border-top: 1px solid gray;
}

#left {
	padding-top: 0.5em;
	position: absolute;
	left: 0;
	top: 0;
	width: 33%;
}

#middle {
	padding-top: 0.5em;
	position: absolute;
	text-align: center;
	left: 33%;
	top: 0;
	width: 33%;
}

#right {
	padding-top: 0.5em;
	position: absolute;
	text-align: right;
	left: 66%;
	top: 0;
	width: 33%;
}
-->
</style>

and in the body of the document:

<!-- navigation -->
<div id="bottom">

   <div id="left">
   <a href="back.htm">Back</a>
   </div>

   <div id="middle">
   <a href="toc.htm">Table of Contents</a>
   </div>

   <div id="right">
   <a href="next.htm">Next</a>
   </div>

</div>
<!-- end navigation -->

-- 
J. David Eisenberg  http://catcode.com/
Received on Friday, 4 January 2002 13:43:43 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:12 GMT