Sign In | Register Now About Bytes | Help | Site Map
Connecting Tech Pros Worldwide

Align left and right on a single line

Question posted by: Craig Thomson (Guest) on July 20th, 2005 10:21 PM

How can I have some text aligned to the left of the page and some more
text aligned to the right using only CSS without a table?

SPAN doesn't have any alignment, and there is only a single DIV block
per line, and so only one alignment.

TIA

Craig
Barry Pearson's Avatar
Barry Pearson
Guest
n/a Posts
July 20th, 2005
10:21 PM
#2

Re: Align left and right on a single line
Craig Thomson wrote:[color=blue]
> How can I have some text aligned to the left of the page and some more
> text aligned to the right using only CSS without a table?
>
> SPAN doesn't have any alignment, and there is only a single DIV block
> per line, and so only one alignment.[/color]

The following is a crude example of what can be done. But it obviously won't
work right at narrow viewport widths, because the bits of text overlap. You
need to work out what you want to happen under various circumstances, because
that will tell you which of many options to use.

HTML:

<div class="line">
<span class="left">Left hand text</span><span class="centre"> Centre text
</span><span class="right">Right hand text </span>
</div>

CSS:

span.left {
position: absolute;
left: 0;
}
span.right {
position: absolute;
right: 0;
}
div.line {
position: relative;
text-align: center;
width: 100%;
}

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/



Barry Pearson's Avatar
Barry Pearson
Guest
n/a Posts
July 20th, 2005
10:21 PM
#3

Re: Align left and right on a single line
Craig Thomson wrote:[color=blue]
> How can I have some text aligned to the left of the page and some more
> text aligned to the right using only CSS without a table?
>
> SPAN doesn't have any alignment, and there is only a single DIV block
> per line, and so only one alignment.[/color]

The following is a crude example of what can be done. But it obviously won't
work right at narrow viewport widths, because the bits of text overlap. You
need to work out what you want to happen under various circumstances, because
that will tell you which of many options to use.

HTML:

<div class="line">
<span class="left">Left hand text</span><span class="centre"> Centre text
</span><span class="right">Right hand text </span>
</div>

CSS:

span.left {
position: absolute;
left: 0;
}
span.right {
position: absolute;
right: 0;
}
div.line {
position: relative;
text-align: center;
width: 100%;
}

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/



Spartanicus's Avatar
Spartanicus
Guest
n/a Posts
July 20th, 2005
10:21 PM
#4

Re: Align left and right on a single line
Craig Thomson <craig@spam.free> wrote:
[color=blue]
>How can I have some text aligned to the left of the page and some more
>text aligned to the right using only CSS without a table?[/color]

By using a css table and a hack to supply poor old IE with a float
replacement.

--
Spartanicus

Spartanicus's Avatar
Spartanicus
Guest
n/a Posts
July 20th, 2005
10:21 PM
#5

Re: Align left and right on a single line
Craig Thomson <craig@spam.free> wrote:
[color=blue]
>How can I have some text aligned to the left of the page and some more
>text aligned to the right using only CSS without a table?[/color]

By using a css table and a hack to supply poor old IE with a float
replacement.

--
Spartanicus

Spartanicus's Avatar
Spartanicus
Guest
n/a Posts
July 20th, 2005
10:21 PM
#6

Re: Align left and right on a single line
Spartanicus <me@privacy.net> wrote:
[color=blue][color=green]
>>How can I have some text aligned to the left of the page and some more
>>text aligned to the right using only CSS without a table?[/color]
>
>By using a css table and a hack to supply poor old IE with a float
>replacement.[/color]

Example:
http://www.spartanicus.utvinternet....t_using_css.htm

--
Spartanicus

Spartanicus's Avatar
Spartanicus
Guest
n/a Posts
July 20th, 2005
10:21 PM
#7

Re: Align left and right on a single line
Spartanicus <me@privacy.net> wrote:
[color=blue][color=green]
>>How can I have some text aligned to the left of the page and some more
>>text aligned to the right using only CSS without a table?[/color]
>
>By using a css table and a hack to supply poor old IE with a float
>replacement.[/color]

Example:
http://www.spartanicus.utvinternet....t_using_css.htm

--
Spartanicus

 
Not the answer you were looking for? Post your question . . .
189,846 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
  • Didn't find the answer you were looking for?
    Post Your Question
  • Top Community Contributors