Table cell with left justified text and right justified image

Hi Experts,

I am trying to format some cells in a table.
Within a single cell I want to have:

text that is left justified, and
an image ("MORE>") that is right justified


I'm using Microsoft Expression Web 4.

See the images below ("before" and "after").

Regards,
Leigh

"before"
"after" - desired formatting
LVL 1
LeighWardleAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
We can't see the code in your image.  Please post a link to your url so we can view your code.

It looks like you can just remove the left border in the before picture to get to the after.  But without seeing code it is hard to say.
0
LeighWardleAuthor Commented:
Thanks, padas.

The code is here.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
See my sample here http://jsbin.com/AzAXUCi/3/edit?html,output

Add this to your css

 .ms-grid5-left,.ms-grid5-tl{border-left:none;}

Change your table tag to

<table border="0" cellpadding="0" cellspacing="0" width="82%" class="ms-grid5-main">
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Perhaps also add some padding to the left td

.ms-grid5-left{padding-left:5px;}
0
LeighWardleAuthor Commented:
Thanks, padas.

Sorry, I am a .css newbie.

How do I combine:

 .ms-grid5-left,.ms-grid5-tl{border-left:none;}

and

.ms-grid5-left{padding-left:5px;}

?

Thanks,
Leigh
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I updated the jsbin http://jsbin.com/AzAXUCi/4/edit?html,output

You can see they are just on two lines.   If you are using an external style sheet, just place the two lines at the bottom of your css style sheet.  Or between the <style></style> tags.  Best to use the style sheet though.



<style>
.ms-grid5-left,.ms-grid5-tl{border-left:none;}
 .ms-grid5-left{padding-left:5px;}
</style> 

Open in new window

0
LeighWardleAuthor Commented:
Hi padas,

I made the changes you outlined as follows.

1. Changed my table tag to

<table border="0" cellpadding="0" cellspacing="0" width="82%" class="ms-grid5-main">

2. Added the following lines to my external css sheet (URL):

.ms-grid5-left,.ms-grid5-tl{border-left:none;}
.ms-grid5-left{padding-left:5px;}

I reloaded the code to the same URL as before.

I can see the increased padding around the text, but the Vertical table border to the left of "MORE >>" is still there?

Regards,
Leigh
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Change

ms-grid5-left,.ms-grid5-tl{border-left:none;}
 .ms-grid5-left{padding-left:5px;}

to

ms-grid5-left,.ms-grid5-tl{border-left:none!important;}
 .ms-grid5-left{padding-left:5px!important;}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
skullnobrainsCommented:
i don't really have time to look at your existing code right now, but there is a good way to achieve this in css without tables

stick what needs to be on the left-hand side in a block container (such as a div), apply float:left; to it and apply text-align:right; to the parent container. it does not work the other way round.

if the parent container is wide enough, the left and right parts will be properly positioned. if it is too narrow, the right-hand text will be on the right but below the floated container
0
LeighWardleAuthor Commented:
Thanks, padas, for your persistence.

It only worked after I added a full stop in front of the changes, i.e.

.ms-grid5-left,.ms-grid5-tl{border-left:none!important;}
 .ms-grid5-left{padding-left:5px!important;}
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.