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

There doesn't exist a float: top and float: center The float property can only have left, right, initial, inherit and none.

If you want to align content in table cells as the way tou want, you will need the properties text-align and vertical-align and there's no need for span tags with this.

https://css-tricks.com/almanac/properties/t/text-align/
https://css-tricks.com/almanac/properties/v/vertical-align/

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.