Question

Ok so in my table cells I have an image on the left, a link that I want top aligned, and then a small description below that.

Right now I have the image on the left and the link top aligned. My problem is that the link text is carrying over below the image, instead of staying to the right of the image and cutting off at the width of the cell.

Here is my css for the link. Setting the width does nothing. I have tried setting the display to block, but then that puts the link below the image. I am very new to html so bare with my ignorance.

.jobLink {
    color:black;
    vertical-align:top;
    width:100px;
}

EDIT 1:

Thanks for all of your suggestions. I am going to try and test this out tonight. Also, thanks for the double check on whether or not I really needed a table. The more I thought about it I really don’t need a table with the way I am setting up each list item. It makes more sense to use a list.

EDIT 2:

Ok so here is the look that I am going for.

I have switched from a table to a list using everyone’s advice. The data isn’t really tabular.

EDIT 3

Here is the updated css I am using on the list.

.jobList {
    background: white;
    color:black;
    width:inherit;
    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-size:10pt;
    font-weight:bold;
    list-style:none;
    float:left;
    padding:0;
    margin:0;
}

.jobList li 
{
    float:left;    
    overflow:hidden;
    width:inherit;
}

.jobList li a
{
    color:Black;
    vertical-align:top;
    white-space:nowrap;
}

.jobList li img
{
    float:left;    
}

Edit 4

This is the image and here is the list item in question. Also, there is a wrapper div on the list itself and this is probably key. I have added that css.

.jobsListWrapper {
    width:318px;
    height:500px;
    overflow:auto;
    float:left;
}

<li>
<div>
<img src="/images/page.png">
<a id="5182" href="/jobs.aspx?rid=1016&amp;jid=5182">MyJobID - This is my long title for the task that I need to complete</a>
</div>
</li>

EDIT 5

I JUST SAW IT. The wrapper is causing the list item to overflow automatically…ok so how do I only overflow vertically? Ok no that wasn’t the problem.

Answer 1

Try adding:

position:relative;
display:block;
overflow:hidden;

To the <ul> css

and

postion:absolute;

to the <li> css.

The reason for this is that if the <ul> is absolutely positioned, it is removed from the flow of the document, which in turn means that the <li> will position relative to the viewport and ignore the overflow:hidden of the <ul>