Solved

CSS text alignment in a <td>

Posted on 2011-03-03
11
488 Views
Last Modified: 2012-05-11
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
Comment
Question by:Etdashou
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 5

Expert Comment

by:Noduzz
ID: 35029318
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
 
LVL 5

Expert Comment

by:Noduzz
ID: 35029324
sorry that should be align not alig in the text-alig: left; code
0
 
LVL 1

Author Comment

by:Etdashou
ID: 35029453
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
 
LVL 5

Expert Comment

by:Noduzz
ID: 35029509
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
 
LVL 5

Expert Comment

by:Noduzz
ID: 35029539
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Author Comment

by:Etdashou
ID: 35029601
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
 
LVL 5

Expert Comment

by:Noduzz
ID: 35029638
Is there any reason why you cant just nest the another table in the table?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35029812
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
 
LVL 12

Accepted Solution

by:
Chad Haney earned 250 total points
ID: 35031182
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
 
LVL 1

Author Closing Comment

by:Etdashou
ID: 35039445
Using css float was the solution.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 35040963
Yes, and in posting ID:35029812 above I said that.  Did you not see it?
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Split in Javascript 5 31
CSS z-index issue 3 22
Removing HTML elements using javascript 4 22
Python - desktop use 1 10
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now