2 Replies Latest reply on Jun 9, 2015 2:17 PM by osgood_

    Align Sections in Footer

    kingpat27 Level 1

      I am working on a footer and have it split into three sections: left, center and right. I want all the information to be at the top of the footer. I also want to put the copyright information in the bottom left of the left section. Does anyone know how I can do it?

        • 1. Re: Align Sections in Footer
          Nancy OShea Adobe Community Professional & MVP

          Care to show us your code so far?

          Offhand, I'm guessing you need to add some margins or padding above the copyright info to push it down the column.

           

          Nancy O.

          • 2. Re: Align Sections in Footer
            osgood_ Level 8

            That should be simple enough. Use display: table and display: table-cell; as the example code shows below. Then if your page is responsive you can set the columns to display: block; in a css media query for mobile devices and move the position of the copyright <div>:

             

            <!DOCTYPE html>

            <html>

            <head>

            <meta ="charset=UTF-8" />

            <title>Untitled Document</title>

             

            <style>

            * {

                box-sizing: border-box;

            }

            #footer {

            display: table;

            width: 90%;

            margin: 0 auto;

            }

            .box {

                display: table-cell;

                background-color:#CC6;

                padding: 20px;

                position: relative;

            }

            .box h2 {

            margin: 0;

            padding: 0;

            }

            .box p {

            margin: 0;

            padding: 8px 0;

            }

            .left {

                background-color: #E0E0E0;

            }

            .center {

                background-color: #CACACA;

            }

            .right {

                background-color: #EAEAEA;

            }

            .copyright {

            position: absolute;

            bottom: 0;

            padding: 0 0 20px 0;

            }

            .mobile {

                display: none;

            }

             

            @media screen and (max-width: 768px) {

            #footer {

            display: block;

            }

            .box {

            display: block;

            }

            .desktop {

                display: none;

            }

            .copyright {

            position: static;

            padding: 30px 0 0 0;

            }

            .mobile {

                display: block;

            }

            }

            </style>

            </head>

             

            <body>

             

             

            <div id="footer">

             

            <div class="box left">

            <h2>Left Column</h2>

            <p>Some text goes here. Test goes in this space.</p>

            <p>Some text goes here. Test goes in this space.</p>

             

            <div class="copyright desktop">&copy;Copyright</div>

            </div>

             

            <div class="box center">

            <h2>Centre Column</h2>

            <p>Some text goes here. Test goes in this space.</p>

            <p>Some text goes here. Test goes in this space.</p>

            </div>

             

            <div class="box right">

            <h2>Right Column</h2>

            <p>Some text goes here. Test goes in this space.</p>

            <p>Some text goes here. Test goes in this space.</p>

            <p>Some text goes here. Test goes in this space.</p>

            <p>Some text goes here. Test goes in this space.</p>

            <p>Some text goes here. Test goes in this space.</p>

            <div class="copyright mobile">&copy;Copyright</div>

            </div>

             

            </div>

            </body>

            </html>

            1 person found this helpful