Align text at the end of a container

[alamtfuerwerbung]

Hi, pls check out http://www.kartenillustraten.com/start2/

I want the text on the right side at the end of the container, that it is inline with the bottom border of the picture.
Pls see also http://ctrlv.in/974850

Would be great if u can provide me with some css for that.

Thx
Andre

[lely]

Hi Andre,

To achieve that, we have to set those 2 columns to have the same height first. On Cornerstone > Custom JS, add the following:
jQuery(document).ready(function($) { var max = 0; $("#x-section-2 .x-column").each(function(index, el) { if( $(this).height() > max ){ max = $(this).height(); } }); $("#x-section-2 .x-column").css('height', max); });

Then on the right column where the text is added, add position: relative; on it’s style field. Also add position: absolute; bottom: 0; on the style field of the text element.

For more code snippets that might help, see this: https://theme.co/apex/forum/c/themeco/code-snippets

Cheers!

[alamtfuerwerbung]

Hi thx.

That works fine.
Only cornerstone seems to have a problem with the depiction. http://ctrlv.in/977080

Cheers
Andre

[alamtfuerwerbung]

What is the code for center the text in the middle of the column?

Thx
Andre

[nabeel]

Hi again,

Try this code:

.x-text {
    text-align: center !important;
}

Hope this helps!

[alamtfuerwerbung]

Hi thx, but this is code for center the text horizontally.
I want to center it vertically.

Thx
Andre

[nabeel]

Hi again,

Try this code instead:

@media screen and (min-width: 980px) {
  .x-column {
    float: none !important;
    display: table-cell !important;
    vertical-align: middle;
    padding-right: 4% !important;
  }
  .x-column.last, .x-column:last-of-type {
    padding-right: 0 !important;
  }
}

Hope this helps!