CODEWITHSUNDEEP
css
user2216267
user2216267

Reputation: 491

align text to right in td tag

align the Date to extreme right in the td box using float:right; it's working for chrome but not for mozilla firefox....how to align Date to extreme right in the image below? the position of Date & size of <hr/> is changing with the length of content.

i want to keep the heading at left and Date at right in the same line for mozilla.

aligning in mozilla

the code used:

<table id='cs'>
<tr>
<td>
<font size='4' id='heading'><b><U>heading</U></b></font>
<font size='2' style='float:right;'><i><b >Date: </b>date</i></font><br/>
Test Content<br/><hr/>
Signature<br/>
</td></tr></table>

The id cs has below rules:

#cs{
    border: 2px solid black;
    padding: 4px 17px;
    width: 100%;
    height: auto;
    margin-right: 20px;
    margin-bottom: 10px;
    display: inline-block;
    background: #f0f4fc;
}

id Heading has below rules:

#heading
{
    text-transform:capitalize;
}

Upvotes: 1

Views: 12545

Answers (4)

trylimits
trylimits

Reputation: 2575

As Skovy mentioned in his comment, try to avoid your styling within html tags like you did.

Also the font-tag is deprecated.

I have written an example which solves your issue using CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #cs {
                border: 2px solid black;
                padding: 4px 17px;
                width: 100%;
                float:right;
                margin-right: 20px;
                margin-bottom: 10px;
                background: #f0f4fc;
            }
            .post-content {
                <!-- style your content here -->
            }
            .post-header {
                float: left;
                font-weight: bold;
            }
            .post-date {
                float: right;
                font-size: 0.7em;
            }
            .post-date .label {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <table id="cs">
            <tr>
                <td>
                    <div class="post-header">
                        Test post
                    </div>
                    <div class="post-date">
                        <span class="label">Date: </span>12.12.1212
                    </div>
                    <div style="clear:both"/>
                    <div class="post-content">
                        My Content
                    </div>
                </td>
            </tr>
        <table>
    </body>
</html>

You can see the result here.

Upvotes: 2

Subtlebot
Subtlebot

Reputation: 322

Since your content is in a table for whatever reason, wouldn't it be reasonable to put the date in another table column and align it to the right within that column via CSS class?

<table id='cs'>
  <tr>
    <td>
        <h2 class='heading'>".$heading."</h2>
    </td>
    <td>
        <span class='date'><strong>Date: </strong>".$date."</span>
    </td>
  </tr>
</table>

You can float the class to the right, or align the text to the right.

Upvotes: 0

Matt Lambert
Matt Lambert

Reputation: 3665

Add a class called .right to your css with text-align set to right, by the way you should ditch the font tags and do that via css

<style type="text/css">
 .right { text-align: right; }
</style>

<table>
 <tr>
  <td class="right">stuff that I want right aligned</td>
 </tr>
</table>

Upvotes: 0

shakthydoss
shakthydoss

Reputation: 2631

You should try like this.

 <td align='right'>date<td>

Upvotes: 2

Related Questions