Positioning Text to Sit at Bottom of Adjacent Column

Design help General
1

Hi!

I’m trying to position some text in a column (‘If you’re interested…’ and the email link below it) so that it aligns with the bottom of the text in the column to its left.

1116×414 57.9 KB

As you can see in the screenshot, currently it’s sitting level with the top of the adjacent column. I simply want it to display at the bottom. Ideally I’d want the baseline of the text to align as well, but maybe that’s one for me to work out :stuck_out_tongue_winking_eye:

I’m using Chrome by the way.

Preview link:
https://preview.webflow.com/preview/stirtoaction?preview=a00f067dc98a518728761f29927843ca

2

Hi @Maxwell, thanks for the question ! Are you still having any issue with this ? I can see now from the read-only design view, that you have added an additional row and column for the bottom texts.

Another way to do this, is to put a div in each column, set the height and width to 100% and position relative.

Then you put further divs into the parent div inside the column, and position those divs with absolute positioning, anchored to the bottom, forcing the text to align to the bottom of the parent divs inside of the columns.

3

Hi @cyberdave! Thanks for the reply!

I’ve attempted to follow your advice but I can’t seem to get the desired result.

When I create the divs as you say I end up with something like this:

1241×516 104 KB

The text I want anchored to sit with the bottom of the left column is leaping up to anchor itself at the bottom of the header above the columns. Are you able to see where I’m going wrong?

Really appreciate the help, thanks again.

4

Anyone able to clarify for me where I’m going wrong with this? I feel like the solution must be pretty simple but… :confused:

5

It is simple if you know CSS well. There are a couple different ways to accomplish this within webflow.

Set a height to that row or to the class for each column within the row. Set the column height to 100%, if you set a row height. Wrap the 2 elements you want to align vertically in a div and give it a class.

– Position relative the columns and set position absolute for the inner div and set it to bottom:0;left:0;right:0
or
– Add css to display the column class as table and the inner div as table with vertical-align:bottom

<style>
.col {display:table;} /* Column within the row */
.bottom-align { vertical-align: bottom;display:table-cell;} /* Content within the column */
</style>

I’d recommend always using div’s within your columns as inner wrappers and not having free floating elements .

Reason cyberdave’s suggestion didn’t work is because setting 100% height to an element without a parent with a set height doesn’t work.

6

Hi @nickster, thanks a lot for adding that ! I forgot to mention about the parent ! thanks :slight_smile:

7

Thank you so much @nickster and @cyberdave!

I’m working on my coding skills while I use Webflow so it really helps to have these points clarified along the way. I appreciate it!

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.