The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Aligning 'Remember Me' with its checkbox and the 'Send' Button

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #236119


    I have a Web page here:

    I have been trying to place the two words ‘Remember Me’ on one line and to horizontally align ‘Remember Me’ with its checkbox AND the ‘Send’ button.

    I am happy with the style and position of the ‘Send’ button.

    You will be able to see from my commented out code (if you visit the page) that I have had no success!

    I have posted the relevant code here:

    Many thanks.


    Codepen needs the output HTML to work.

    ASP code will do nothing.

    Problem is…you’re floating things and floated elements are quite hard to vertically align.

    display:inline-block works much better for this and allows for vertical-align:middle.


    inline-block and vertical-align:middle are good solutions. Just as a reference, though, if you want to continue using floats, you have some goofy things going on in your DOM, specifically, the span that is containing the elements has a fixed width of 14px? also, the checkbox is being styled with a width of 252px by .form_settings input. removing the fixed width on the span and checkbox will get them inline like I presume you are looking for, but you’ll notice that the checkbox and text are still not aligned. This is normal for floats. The solution to that is:

    #checkbox1 {
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.