Is it possible to set an anchor point for a div in CSS?

Question

I finally got this cool little twitter bird that displays the latest tweet in my feed.

My only problem is about the placement of the actual tweet. Since the amount of characters constantly changes in each tweet the box expands vertically (enlarges in height) and sometimes makes the image look off/ruins the effect.

I'm still not great at CSS so I'm not sure if I'm missing something simple, but here are two examples to illustrate this concept to you guys.

21 Character Tweet TEST:

140 Character Tweet TEST:

Here is the code I'm using (note that the "lowerleft" div is styled by an external CSS):

<div id="lowerleft">
  <div id="twitterbutton" style="z-index:100;padding-left:50px;padding-top:75px">
    <div class="tri"style="width:160px;"id=”twitter_update_list”>
      <div id="twitter_div">Latest Tweet:</div>
        <br />
        This is a test. TEST.
    </div>
  </div>
</div>

If I didn't explain myself exactly, let me try one last time:

Is there anyway to set an anchor in css to make sure my div doesn't grow vertically towards the negative on the y-axis but for it to expand vertically up in the positive y-axis direction?

Answer 1

You can absolutely position it and give it a bottom anchor point. This way, as you add content to it it'll expand upwards instead of downwards.

How exactly you apply absolute positioning depends on your structure, but it shouldn't be difficult.