"Fro" <showandbeshown [at] gmail.com> wrote in message
news:829a2002-022a-4056-81b0-cd7a50e7ddcb [at] k37g2000hsf.google groups.com...
> Hi,
>
> very often I need to put two short pieces of text in one line such
> that the first piece is aligned to the left of the line and the second
> one to the right. The way I do it is as following:
>
> <table width='100%' border='0'><tr><td>
> <div align='left'> piece 1 </div>
> </td><td>
> <div align='right'> piece 2 </div>
> </td></tr></table>
>
> But I think it is not an elegant way to solve the problem. Do you know
> a better one? (Pleas do not tell me to go to work in MacDonald's :) )
Try this below (styles declared inside HTML, but easy enough to incorporate
into your external stylesheet).
The idea is that the text 'floats' to either left or right. Note that a
0.5em spacing is applied to left or right to ensure at least a 1em space
between the elements.
Beware of the 'clearright' css class... it may misbehave if you have other
right-floating elements in your page.
Not really sure if it's more 'elegant', but worth consideration?
<!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=utf-8">
<title>Tester</title>
<style type="text/css">
<!--
..lefttext {
text-align: left;
float: left;
margin-right: 0.5em;
}
..righttext {
float: right;
margin-left: 0.5em;
text-align: right;
}
..clearright {
clear: right;
}
-->
</style>
</head>
<body>
<div class="lefttext">leftmost text area</div><div
class="righttext">rightmost text area</div>
<p class="clearright">next paragraph next paragraph next paragraph next
paragraph next paragraph next paragraph next paragraph next paragraph next
paragraph next paragraph next paragraph next paragraph next paragraph next
paragraph next paragraph next paragraph next paragraph next paragraph next
paragraph next paragraph next paragraph next paragraph next paragraph next
paragraph next paragraph next paragraph next paragraph next paragraph next
paragraph next paragraph next paragraph next paragraph next paragraph next
paragraph next paragraph next paragraph next paragraph next </p>
</body>
</html>
