0
Welcome Guest! Login
0 items Join Now

SOLVED Align a div to the bottom of it's parent

    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    SOLVED Align a div to the bottom of it's parent

    Posted 12 years 1 month ago
    • I am trying to align a div to the bottom of its parent container.

      I added a class .align-bottom to my LESS with the following code:
      .align-bottom {
          position: relative;
          bottom: 0;
      }

      I have added the class as a module class suffix, but it has no effect.

      You can see the module positioned in the footer with the content "This is a test" on this page: betelec.ergonomiq.net/societe/qui-sommes-nous

      What am I doing incorrectly?
    • Last Edit: 12 years 1 month ago by Ali Samii.
    • Thank you.

      Ali Samii
  • Re: SOLVED Align a div to the bottom of it's parent

    Posted 12 years 1 month ago
    • Hi Ali,

      The problem is your module position has not the same height as the left one.

      You have to update the height and set the align-bottom with an absolute position.

      Here's some LESS code :
      #rt-footer .rt-grid-3.rt-omega {
        height : 260px; //same as .rt-grid-3.rt-alpha
       
        .rt-block.align-bottom {
           position: absolute;
           bottom:0;
        }
      }

      Hope it helps,

      Olivier
    • Some useful links :

      Some tips for an efficient process :
      1. When possible, post URL of your website, it's always better to see the problem in REAL
      2. Only one problem per thread please
      3. When problem is solved, just edit your...
    • Ali Samii's Avatar
    • Ali Samii
    • Elite Rocketeer
    • Posts: 629
    • Thanks: 2

    Re: SOLVED Align a div to the bottom of it's parent

    Posted 12 years 1 month ago
    • Hi Olivier,

      Merci beaucoup. Ça m'aide.

      Back to English for everyone else's benefit...The height of the left module may change as new menu items are added or some may be removed. How do I make the "This is a test" module bottom-align to the parent container without fixing it's height?
    • Thank you.

      Ali Samii

Time to create page: 0.043 seconds