PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Aligning Buttons and DIV Elements (CSS Issue)

  1. theslink2000
    Member

    Hi,

    I've been trying to add a close button to some of my forms, I've managed to create one using a HTML field and the following bit of code:

    <p style="text-align: center; clear:both;"><a class="form-button" href="javascript:parent.jQuery.fancybox.close();">Close</a></p>

    Please note that these forms are opening in Fancybox windows.

    But the problem I have is the button appears but because it is within a separate DIV element it is not aligned and I cannot seem to force it. I just want it to be lined up with the submit button (here showing as delete) just right aligned not left.

    http://s1089.beta.photobucket.com/user/theslink2000/media/ButtonAlign_zpsf98372f4.jpg.html

    Can anyone give me a hand with this please?

    Posted 7 years ago on Wednesday February 20, 2013 | Permalink
  2. Can you please post a link to your page with the lightbox form?

    Posted 7 years ago on Wednesday February 20, 2013 | Permalink
  3. theslink2000
    Member

    It's a live test site but I've disabled the security around this test area, click on any of the delete buttons to bring up the form:

    http://www.doctorschemist.co.uk/newsite/patient/mo05id-002

    Posted 7 years ago on Wednesday February 20, 2013 | Permalink
  4. This should do the trick for you:

    [css]
    #field_16_3 {
    position: absolute;
    top: 155px;
    left: 100px;
    }
    Posted 7 years ago on Wednesday February 20, 2013 | Permalink
  5. theslink2000
    Member

    Thanks for that bud, it does just about solve the issue but is there a way of doing this dynamically, without setting specific locations?

    Cheers.

    Posted 7 years ago on Wednesday February 20, 2013 | Permalink
  6. No problem. When you say: is there a way of doing this dynamically, without setting specific locations? I assume you are referring to the positioning. The only other thing I can think for you to try would be to try to float the footer of the form left and then float this HTML field to the right. But then you'd probably need to use margins to some degree, which might put you in the a similar boat.

    Posted 7 years ago on Wednesday February 20, 2013 | Permalink
  7. theslink2000
    Member

    Yeah I was basically assuming the same thing as floats were the only way I could think of doing it originally but it's proving unresponsive.

    My only cause for concern is how it will appear on differing screen resolutions and browsers, something I haven't yet been able to test.

    Any thoughts on that one bud?

    Posted 7 years ago on Thursday February 21, 2013 | Permalink