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.
lewashby 56 Junior Poster
gentlemedia 803 Master Poster
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/
lewashby 56 Junior Poster
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>";
gentlemedia 803 Master Poster
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.