I'm trying to align 3-5 items up in a table cell, three are on the top and two are on the bottom. In each of my table cells I want the first item to be at the top left of cell and the third item I want to be at the top right of the cell. Those two are working just fine with a CSS class .classname { position: relative; float: top; float: left; } and likewise for the right floating item. It's the 2nd item in the cell I'm having trouble with, I can't get it to float in the top center of the cell. .classname { position: relative; float top; float: center; } Any ideas how I can pull this off? All the items are currently in <span> tags.
Thanks for any and all replies.

Recommended Answers

All 3 Replies

I changed my css from this
.facility { position: relative; float: top; float: right; }
to this
.facility { text-align: right; vertical-align: top; color: red; }
And the text that was on the right side of my cell which was were I wanted it snapped all the way to the left until it ran into the next item in the cell. It appears that the float: right; and text-align: right; is not. What am I missing here?
The red is only there so I can see if the html and css are connecting at all. Also, when I took away the span tag and only left a class name in the <> it failed to even change the color.

echo "<tr>";
        echo "<td><class='name'>{$inmate->get_property('full_name')} ({$inmate->get_property('race')})</class><span class ='number'>{$inmate->get_property('number')}</span><span class='facility'>{$inmate->get_property('facility')}</span><br /><br /><span class='dates'>8-05-15 <span class='red'>/</span> 8-08-15</span><a href=''><span class='edit'>Edit</span></a></td>";
        echo "</tr>";

Could you make a jsfiddle or pen what your dynamic table should output in HTML and with the previous styles you had? I would like to see what you're after and then I'll try to recreate it with the properties I mentioned.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.