468,270 Members | 1,547 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,270 developers. It's quick & easy.

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
Jul 20 '05 #1
6 99642
Craig Thomson wrote:
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.


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/
Jul 20 '05 #2
Craig Thomson wrote:
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.


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/
Jul 20 '05 #3
Craig Thomson <cr***@spam.free> wrote:
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?


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

--
Spartanicus
Jul 20 '05 #4
Craig Thomson <cr***@spam.free> wrote:
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?


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

--
Spartanicus
Jul 20 '05 #5
Spartanicus <me@privacy.net> wrote:
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?


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


Example:
http://www.spartanicus.utvinternet.i..._using_css.htm

--
Spartanicus
Jul 20 '05 #6
Spartanicus <me@privacy.net> wrote:
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?


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


Example:
http://www.spartanicus.utvinternet.i..._using_css.htm

--
Spartanicus
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

11 posts views Thread by Bruce A. Julseth | last post: by
6 posts views Thread by James Brown [MVP] | last post: by
TheServant
14 posts views Thread by TheServant | last post: by
6 posts views Thread by COSA200 | last post: by
reply views Thread by NPC403 | last post: by
reply views Thread by zattat | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.