/    Sign up×
Community /Pin to ProfileBookmark

aligning text left and image right in a table cell

Copy linkTweet thisAlerts:
Apr 07.2003

Hello
Can anyone tell me how I can use css to align text left and image right in a single table cell.
It’s part of a larger menu each button with a 1 pixel border defined in the class “nav-border”. I’ve tried using align right within the image tag but this pushes everything out and obviously ligns the text right too which I don’t want. The code so far is as follows:

<tr>
<td colspan=”2″ class=”nav-border” align=”right”>
<a class=”nav” href=”news.html”>News<img src=”images/ic_news.gif” alt=”News” height=”18″ width=”20″ border=”0″ /></a></td>
</tr>

?????????
Yes I would love to get rid of tables but….

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisApr 07.2003 — Try this:&lt;table border&gt;
&lt;tr&gt;
&lt;td width=300&gt;
&lt;span style="float: left"&gt;This is some text&lt;/span&gt;
&lt;span style="float: right"&gt;&lt;img src="whatever.gif"&gt;&lt;/span&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
Copy linkTweet thisAlerts:
@tgoddingauthorApr 07.2003 — thanks gil, this seems to work in most browsers (even netscape 4 which I still take notice of ( ;

but...

in explorer 5 on a mac the icon images which are floated right seem to have just disappeared into thin air. Also netscape on a mac the links on the texts and icons don't work at all. Is there a fix for this, I don't particularly want to use a separate style sheet for a mac if necessary.

This is the first time I've used this forum it seems really good!
Copy linkTweet thisAlerts:
@David_HarrisonApr 07.2003 — If I were you I wouldn't use css at all, I'd just write;

<table>

<tr>

<td align="justify">

<a blah="blahblah">Here is your link.& nbsp; & nbsp; & nbsp;

(you may need a few more & nbsp; 's, remember to take the spaces out from between the & and the nbsp; ) and you'll end up with an underline going accross the cell unless you hav taken that off the link decoration.

<img src="link.gif"></a>

</td>

</tr>

</table>

that should work for all browsers because it's just plain old html.

Don't quote me on that because I just made it up on the spot so it might not work at all.
Copy linkTweet thisAlerts:
@gil_davisApr 07.2003 — Then the image is on the next line, not the same line.
Copy linkTweet thisAlerts:
@toicontienApr 07.2003 — You can use CSS, but you'll need to do three things:

  • 1. Set the text-align property of the table cell to left. This affects text and images.


  • 2. Set the float property of the image to float: right;


  • 3. If the image has a greater height than the text, the image will seem to overlap the edge of the table cell on some browsers. You would need to add something else below the image and set in CSS clear: both; That will stretch the table cell below the image.


    • <table>

    <tr>

    <td style="text-align: left;">

    <image src="..." style="float: right;" alt="right aligned image">

    this text is left aligned

    <image src="invisibleGIF.gif" width="1" height="1" style="clear: both;">

    </td>

    </tr>

    </table>

    Try playing with that and see how it works.
    Copy linkTweet thisAlerts:
    @jdaviaApr 07.2003 — [i]Originally posted by tgodding [/i]

    [size=-8]Hello

    Can anyone tell me how I can use css to align text left and image right in a single table cell.

    <tr>

    <td colspan="2" class="nav-border" align="right">

    <a class="nav" href="news.html">News<img src="images/ic_news.gif" alt="News" height="18" width="20" border="0" /></a></td>

    </tr>

    [/size]    [/QUOTE]
    Here is your code modified

    <tr>

    <td colspan="2" class="nav-border" align="left">

    <a class="nav" href="news.html">News<img align= right src="images/ic_news.gif" alt="News" height="18" width="20" border="0" /></a></td>

    </tr>
    Copy linkTweet thisAlerts:
    @nkaisareApr 08.2003 — [i]Originally posted by tgodding [/i]

    [B]Yes I would love to get rid of tables but.... [/B][/QUOTE]
    I for one, would like to hear the rest of this statement. Whats stopping you?

    Modification to Gil's method:

    <td width=300>This is some text

    <img src="whatever.gif" alt="Alt" style="float: right"></span>

    </td>

    Whenever you float an element, specify its width (except for images). Else the element will take width of its parent element.

    Getting back to [B]Yes I would love to get rid of tables but.... [/B]

    ~~~ Throw away the unnecessary tables ~~~

    <div class="nav-border">

    <div>Link 1 <img src="link1" alt="Link 1"></div>

    <div>Link 2 <img src="link2" alt="Link 2"></div>

    ...

    <div>Link n <img src="linkn" alt="Link n"></div>

    </div>

    div.nav-border {position: absolute; border...}

    div.nav-border div {text-align: left}

    div.nav-border div img {float: right}

    ~~~ End of Bull Sh*t ~~~
    Copy linkTweet thisAlerts:
    @nkaisareApr 08.2003 — Oops, an error above... <img> should come before the text.
    Copy linkTweet thisAlerts:
    @tgoddingauthorApr 08.2003 — [i]Originally posted by jdavia [/i]

    [B]Here is your code modified



    Thanks but already tried that, it just pushes the cell out .
    Copy linkTweet thisAlerts:
    @tgoddingauthorApr 08.2003 — [i]Originally posted by nkaisare [/i]

    [B]I for one, would like to hear the rest of this statement. Whats stopping you?





    I'm designing/developing a very large council site, which is basically quite a large portal. I'm trying to use a mixture of CSS1, XHTML and very simple tables. In some worlds CSS2 is still not totally safe, one day it will be but until then some of us have to comprimise! I have to test on Netscape 4, Explorer 3 and the site has to be at least readable in browsers before this. Tables are still useful for complicated layout and complex data. If I were working on a small site it would be a completely different kettle of fish!



    ... Thankyou for all your help, I think the solution lies in a combination of your replies.?
    Copy linkTweet thisAlerts:
    @jdaviaApr 09.2003 — [i]Originally posted by tgodding [/i]
    [/QUOTE]

    I took out colspan=2, added a width to the cell, and added one more blank column to your code.

    Now the text is left and the image next to it.

    <td class="nav-border" align="center"width="60">

    <a class="nav" href="news.html"> News <img src="images/ic_news.gif" alt="News" height="18" width="20" border="0" /></a></td>

    <td align="center"width="540"></td>
    ×

    Success!

    Help @tgodding spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...