Connecting Tech Pros Worldwide Help | Site Map

Align left and right on a single line

 
LinkBack Thread Tools Search this Thread
  #1  
Old July 20th, 2005, 10:21 PM
Craig Thomson
Guest
 
Posts: n/a
Default Align left and right on a single line


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

  #2  
Old July 20th, 2005, 10:21 PM
Barry Pearson
Guest
 
Posts: n/a
Default 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/


  #3  
Old July 20th, 2005, 10:21 PM
Barry Pearson
Guest
 
Posts: n/a
Default 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/


  #4  
Old July 20th, 2005, 10:21 PM
Spartanicus
Guest
 
Posts: n/a
Default 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
  #5  
Old July 20th, 2005, 10:21 PM
Spartanicus
Guest
 
Posts: n/a
Default 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
  #6  
Old July 20th, 2005, 10:21 PM
Spartanicus
Guest
 
Posts: n/a
Default 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.i..._using_css.htm

--
Spartanicus
  #7  
Old July 20th, 2005, 10:21 PM
Spartanicus
Guest
 
Posts: n/a
Default 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.i..._using_css.htm

--
Spartanicus
 

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Popular Articles

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 220,662 network members.