Aligning 'Remember Me' with its checkbox and the 'Send' Button

[Everton]

Hello

I have a Web page here: http://www.dimadayoub.net/log_in.aspx

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: http://codepen.io/Everton/pen/BjLoZN

Many thanks.

[Paulie_D]

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.

[mhodges44]

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 {
  position:relative;
  top:2px;
}

[Author]

Posts