Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

CSS text alignment in a <td>

Posted on 2011-03-03
11
492 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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
 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Create animated movies for web page 18 83
Question about traversing a tree using jQuery 7 33
Css regex 6 38
How to make button inactive until I fill in all the boxes. 11 18
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

840 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