Home/ Questions/Q 1052881
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T17:09:57+00:00

I have some tabular data. In the last column, I have 2 divs, one

  • 0

I have some tabular data. In the last column, I have 2 divs, one that shows the vote-data, and one that shows the save-data. I would like to first div to stick to the top of the table cell, and the second div to the bottom of the table cell. Setting the table cell {postion: relative;} so I can use {position: absolute;} in the divs has no effect (surprise, surprise)

I want the grid structure a table gives me, so all the columns are lined up above each other so 3 divs wide, all floated left, won’t do that.

Here is a very long sample, (included only for completeness). The part that needs to stick to the bottom of the table cell is at the bottom of the example with a class name of ‘should-float-to-bottom’ and the part that should stay at the top is classed ‘should-stick-to-the-top’. 

<html>
    <head>
        <style type="text/css" media="screen">
   .feedback { position: relative;  width:100px; height=100%}
   .should-float-to-bottom, .should-stick-to-the-top{ position: absolute; right: 0; background: #ccc; }
            .should-stick-to-the-top { top: 0;}
   .should-float-to-bottom{ bottom: 0; }
            .dark {background-color: #ddd;}
            form {margin: 0px;}
  </style>
    </head>
    <body>
        <table width='50%'>
            <tr class="dark">
                <td class="meta">
                    Some Stuff in Here with varying widths
                </td>
                <td class="bookmark-object">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </td>
                <td>
                    <div class='feedback'>
                        <div class="should-stick-to-the-top">
                            <div class="vote-data">
                                <form method="POST" action="/bookmarks/vote/" rel="vote">
                                    <span class="score upscore">1</span> SpriteBtns <span class="score dnscore">0</span>
                                </form>
                            </div>
                            <div class="show-voters">
                                <a href="/profiles/voters/bookmark/7">See&nbsp;Who&nbsp;Voted</a>
                            </div>
                        </div>
                        <div class="should-float-to-bottom">
                            Saved&nbsp;once
                            <br>
                            (including&nbsp;you)
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would try this:

        <head>
        <style type="text/css" media="screen">
   .feedback {position: relative; width:100px;}
   .should-float-to-bottom, .should-stick-to-the-top {background: #ccc; }

   .should-stick-to-the-top { margin-bottom:30px;}

   .should-float-to-bottom{margin-top:30px}
            .dark {background-color: #ddd;}
            form {margin: 10px;}
  </style>
    </head>

    That seemed to work for me, just adjust “margin-top” and “margin-bottom” to move the divs up or down. I think it may have been the “position: absolute;” that was causing problems…so this solution should work as long as you dont need that. Let me know if you have any questions!

    • 0