Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 503
  • Last Modified:

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
0
Etdashou
Asked:
Etdashou
  • 5
  • 3
  • 2
  • +1
1 Solution
 
NoduzzCommented:
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.
0
 
NoduzzCommented:
sorry that should be align not alig in the text-alig: left; code
0
 
EtdashouAuthor Commented:
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.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
NoduzzCommented:
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.
0
 
NoduzzCommented:
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

0
 
EtdashouAuthor Commented:
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....
0
 
NoduzzCommented:
Is there any reason why you cant just nest the another table in the table?
0
 
Dave BaldwinFixer of ProblemsCommented:
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

0
 
Chad HaneyChief Technology OfficerCommented:
For your situation why not do this?  Unfortunately this solution is dependent upon the text not being too long to overlap spans, so it isn't the optimal solution.  The context of the rest of your code would help to determine a better solution.
<td><span style='float:left'>The text</span><span style='float:right'>The text</span></td>

Open in new window

0
 
EtdashouAuthor Commented:
Using css float was the solution.
0
 
Dave BaldwinFixer of ProblemsCommented:
Yes, and in posting ID:35029812 above I said that.  Did you not see it?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 5
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now