How do I keep my links in my table on 1 line? - html

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

Answer 2

Though I do not recommend using a table unless this is truly tabular content, the following solution should work for any container element, including table cells.
If you use a css rule of 'float: left' on the image, the image will, obviously, be floated to the left side of its container. This will make sure that the image stops pushing content bellow it and the content will simply wrap around the image.
In this case, that means the image will position itself to the left, and the link and descriptive text will be right next to that, to its right.
I am assuming the HTML inside your table cell is something along the following lines:
<img src="http://www.heliam.net/Gein/_Media/apple_icon.png">
Here is a link
<p>And here is some descriptive text</p>
Now, if that is the case, then your CSS should simply make sure that the image is floated to the left:
img {
float: left;
}
You can see all this in action right here: http://jsfiddle.net/aySEe/

Answer 3

Something to try might be wrapping each element in a DIV and using float. Excuse the inline CSS.
<td style="width: 15%">
<div style="float: Left">
<img alt="" src="Image.png" />
Hello!
</div>
<div style="float: Right">
<p>Hey This is something.</p>
</div>
</td>
You could then push them closer together using width on the table cell
<td style="width: 15%">
Let me know if that helps!