asked on

CSS text alignment in a <td>

Hello,

I have some text in a <td></td>. I would like to have one part of the text to be left aligned, and the other right aligned. I am unable to do this.

Anyone have an idea of how I could proceed for this? I would like to use "class" and CSS if possible. I tried using some <span> but it doesn't work.
Something like:

<td><span class='leftalign'>The text</span> <span class='rightalign'>The text</span></td>

Open in new window

I include a screenshot, I hope it will help to display my problem.
td-align.png

Noduzz

Well you can just add a class for each like below:

.alignleft {
	text-alig: left;
}
.alignright {

	text-align: right;
}

Open in new window

and then just add the class to the <td> like <td class="testleft"> etc.

Noduzz

sorry that should be align not alig in the text-alig: left; code

Etdashou

ASKER

Hi Noduzz,

This will align all of the text in the TD. I want a part of a text to be aligned left, and the other right in the SAME <td>.

I hope I am clear. If not, please tell me.

Noduzz

if you want to do that i would either split the column into two or add another table in the <td> with 100% width and no borders etc and add two <td> and then do as above.

Noduzz

or something like this might work:

<div name="left_text" style="text-align: left">My left text</div>
    <span name="right_text" style="float: right">My right text</span>

Open in new window

Etdashou

ASKER

Using a <div> will create a "<br>" and the text won't be on the same line.
If I use only <span> in Firefox it works perfectly.

And.... IE8 it doesn't. Each text is on a separate line....

Noduzz

Is there any reason why you cant just nest the another table in the table?

Dave Baldwin

If you make the 'div's both floats, it will work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" summary="" width="333" bgcolor="#dfdfdf">
<tr><td><div name="left_text" style="float: left">My left text</div>
    <div name="right_text" style="float: right">My right text</span></td></tr>
</table>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Chad Haney

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Etdashou

ASKER

Using css float was the solution.

Dave Baldwin

Yes, and in posting ID:35029812 above I said that. Did you not see it?

CSS text alignment in a &lt;td&gt;

CSS text alignment in a <td>