css equivalent to this?

Forum Moderators: not2easy

Message Too Old, No Replies

css equivalent to this?

align some text to left, other text to right on same line

mumble01

4:32 pm on Oct 31, 2002 (gmt 0)

An quick search of the board came up empty so I'm posing this question here.

Is there a CSS equivalent to this? I'd like to align some text to the left and other text to the right on the same line, and avoid using tables if I can. I've been unable to duplicate this using <div>, <span> and text-align.

<table width="100%">
<tr>
<td width="20%" align="left">this is on the left</td>
<td width="*" align="center">this is in the middle</td>
<td width="20%" align="right">this is on the right</td>
</tr>
</table>

Nick_W

4:46 pm on Oct 31, 2002 (gmt 0)

sure there is....


[pre]
.left {
  width: 20%;
  float: left;
}
.right {
  width: 20%;
  float: right;
  text-align: right;
}<p class="left">This is on the left</p>
<p class="right">And this is on the right</p>
[/pre]

I've not tested it but, it should do the trick....

Nick

Longhaired Genius

5:04 pm on Oct 31, 2002 (gmt 0)

What about the middle text Nick?

Due to browser inconsistencies this is quite a tricky one to do. Your table might be the most elegant solution.

I stand to be corrected.

Nick_W

5:08 pm on Oct 31, 2002 (gmt 0)

Hehe, I have rather poor sight sometimes, somehow I completly missed that ;)


[pre]
.left {
 width: 33%;
 float: left;
}
.right {
 width: 33%;
 float: right;
 text-align: right;
}<p class="left">This is on the left</p>
<p class="right">And this is on the right</p>
<p class="right">And this is the middle</p>
[/pre]

You could change those percentages but you'd need to add margins and or padding to compensate....

Nick

quiet_man

5:21 pm on Oct 31, 2002 (gmt 0)

But 'on the same line'? A quick test shows that each <p> tag starts a new line.
I tried it with <span> and it seemed to work, but I'm a real beginner:

.leftalign {width: 20%;
text-align: left;}
.centered{text-align: center;
width: 60%;}
.rightalign{width: 20%;
text-align: right;}

<p>
<span class="leftalign">left-aligned text goes here</span><span class="centered">centred text goes here</span><span class="rightalign">right-aligned text goes here</span></p>

I'm sure there must be a problem with this ...

Nick_W

5:27 pm on Oct 31, 2002 (gmt 0)

No reason why it shouldn't work. In the example below I just added a little inline text align but you could just create three classes left, right and middle....


[pre]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <style type="text/css">
      .left {
      width: 33%;
      float: left;
      }
      .right {
      width: 33%;
      float: right;
      text-align: right;
      }
    </style>
    <title>Menu Hover Boxes</title>
  </head>
  <body><p class="left">This is on the left</p>
<p class="right">And this is on the right</p>
<p class="right" style="text-align: center;">And this is the middle</p>
  </body>
</html> 
[/pre]

Nick

redtail

12:49 am on Nov 29, 2002 (gmt 0)

Yep, that does the trick. I never thought of using two "float: right" settings, one after another. Thanks for posting the solution.

piskie

12:57 am on Dec 2, 2002 (gmt 0)

How can members spend so much time chasing a Google dance for about a week every month and then spend the rest of the month complaining about it when they could be browsing this CSS forum and picking up tips like this.

finite

7:21 am on Dec 5, 2002 (gmt 0)

I'm having similar problems, and the above solution doesn't really cut it for me. :/ In my old table layout I had left aligned and right aligned text on a single line. However the cells didn't have a specificied width, so that the browser basically automatically adjusted the width to the text. (This meant it worked at basically any resolution/window size).

Using a variant of the solution listed here causes problems in smaller windows, as 20% of the screen is now less than the width of the text and it wraps to the next line, even though there is white space free. I've tried using different values but it seems to mess up the design even more. Removing the width specification seems to work fine in IE 6, but I still have wrapping problems in Opera 6.

I'm searching for a more elegant solution but so far that has been fruitless...

Anyhow, here is my code as it stands right now:

.leftalign{
position: relative;
padding-left: .5em;
float: left;
color: #9090B0;
font-weight: bold;
}

.rightalign{
position: relative;
padding-right: .5em;
float: right;
text-align: right;
color: #707090;
}

<div class="leftalign">Left part</div>
<div class="rightalign">Right part</div><br>

I'm using <div> tags as <p> stands for nothing but pain, pain and more pain in Opera.

Longhaired Genius

3:44 pm on Dec 5, 2002 (gmt 0)

If it ain't broke don't fix it!

Floated elements have to have a specific width, so if that don't suit ya, use your table. Tables are not evil. Just use the table framework for that part of the page and style it as necessary with css.

IMHO

copongcopong

12:54 am on Dec 6, 2002 (gmt 0)

yes i agree, if it aint broke, don't fix it.

but one thing when learning css ... it feels like an achievement getting around with tables and using pure css. :)