Solved

CSS text alignment in a <td>

Posted on 2011-03-03
11
484 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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 82

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 82

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Paper tearing animation 6 43
CSS Divs in Safari 3 20
Phone Dialer 5 38
Bootstrap 3 application structure 7 19
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

746 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

13 Experts available now in Live!

Get 1:1 Help Now