How to force 3-column (footer) onto 2-column page?

  • Profile Image
    rwaldenjr
    Asked on September 21, 2017 at 01:01 AM

    I've been struggling with CSS trying to evenly space my Page ID, Copyright and Page Number text elements into three columns to simulate a page footer at the bottom of my two column form. (See my "Contractor Questionnaire" form.)

    This is the original code I used (below), which worked perfectly until I set the page layout to 2 columns by checking the "Enable Form Columns: 2" checkbox in Form Designer:

    #id_216 {
        width : 20%;
    }

    #id_217 {
        width : 60%;
    }

    #id_218 {
        width : 20%;
    }


    Unfortunately, the column setting aligns the "footer" elements into 2 columns too. Now, I can't seem to override the 2-column layout for this one line on the page. I even tried adjusting the column widths for each of these 3 elements (Left and Right elements at 25%, and Middle element at 50%, which is what you see now.) That got all three "footer" elements on the same line, but it pushed them off-center to the left.

    Any idea how to correct my code to accomplish my objective? Is there a better way to go about this using only CSS?

    Thanks!

  • Profile Image
    Mike_G
    Answered on September 21, 2017 at 01:58 AM

    We will be glad to help you with your concern. I have already inspected your form through a clone version. But, just to make sure we understand what you are trying to accomplish exactly, can you send us a screenshot of how you would like the supposed footer in your form to look like, please? — How-to-Post-Screenshots-to-Our-Support-Forum

    Would you like all three texts to be placed at the center of the form but should still have enough space that separates each?

    We will wait for your response.

  • Profile Image
    rwaldenjr
    Answered on September 21, 2017 at 03:37 PM

    Thanks for your response Mike. A perfect example of what I'm trying to achieve on pg.1 of my "Contractor Questionnaire" is the way the 3 "footer" elements float on pgs.2-6 of that same form; flush left, center and flush right, respectively (as seen in screenshot, attached).


  • Profile Image
    david
    Answered on September 21, 2017 at 05:20 PM

    The easiest thing to do would be to adjust the margins for those elements.  The following CSS would do so:

    #id_110 {
        margin-left : -20px;
    }

    #id_112 {
        margin-right : -20px;
    }

    #text_111 {
        margin-left : 40px;
    }

    Here is my test for with the changes made:

    https://form.jotformpro.com/72637097752971