Table cell with left justified text and right justified image

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.

Thanks, padas.

The code is here.

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">

Perhaps also add some padding to the left td

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

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

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> 

Select allOpen in new window

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

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

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;}