Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS text alignment in a <td>

Posted on 2011-03-03
11
Medium Priority
?
500 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
[X]
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
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 84

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

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

715 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