473,320 Members | 1,884 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 100341
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Steve Leferve | last post by:
Hey folks - I have a table for reviewer comments. There is a field called 'txtComment' where it stores a one-sentence comment. In the report, we have these grouped and broken down by category...
11
by: Bruce A. Julseth | last post by:
I have: If (Microsoft.VisualBasic.Left(TextBox1.Text, 1) = "$") Then TextBox1.Text = Microsoft.VisualBasic.Right(TextBox1.Text, TextBox1.Text.Length - 1) End If Adding: Imports...
6
by: James Brown [MVP] | last post by:
Hi, I am having trouble understanding how the 'const' modifier affects the 'left-right' rule when deciphering c-declarations: const int *x; // x is a pointer to a 'const int' int const *x; ...
3
by: Sjef Janssen | last post by:
Is it possible to have a box (div) which sets a background-color and which contains (on the same line) text which is left aligned and text which is right aligned. (as in a table: two td's left one...
8
by: Chaitanya | last post by:
Hello, In my Application i want to know when user clicks both the "Left" and "Right" buttons of the Mouse. I am getting a number like this "3145728". But the MouseButtons Enum contains only Left,...
6
by: Michael7 | last post by:
Hi everyone, Me again! I'm having a problem centering a single line in a div. I have a news section that is a block of it's own, and centered. The text in the news section is left aligned of...
14
TheServant
by: TheServant | last post by:
Hi guys, I have done this before, but I can't figure out why it won't work. If any of you can see my problem, please let me know. Here are the relavent pieces of code. <!-- Main Content --> <div...
1
by: vikastcser | last post by:
Hi All , I have a table where four rows are there and each row has two tds.one td is for label and two image icons and other td is used for keeping numeric values. I am able to accomodate digits...
6
by: COSA200 | last post by:
Hello all. Im new to html, and have started a website, very basic, but it suits me. My question is, i want to add some links to the left hand side of my home page, with the welcome text in the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.