Question

Some help with CSS please!
I was using CSS to make my register form looks nice, but then I find out that my form was not moved right or left with the other page elements such as my background image when I was maximizing or minimizing the window of the explorer (my page was aligned to center of explorer window). So i.e when my window size maximized my background image was changed, but the form remains in the first position. Any ideas how to fix this?
My HTMLcode is:

<div "class="homepageTable">
<form action="#" method="post">
  <input type="text" size="25" name="first_name" placeholder="first name"><br/>
  <input type="text" size="25" name="last_name" placeholder="last name"><br/>
  <input type="text" size="25" name="email" placeholder="email"><br/>
  <input type="text" size="25" name="retype_email" placeholder="re-type email"><br/>
  <input type="text" size="25" name="password" placeholder="password"><br/>
  <input type="text" size="25" name="retype_password2" placeholder="re-type password"><br/>
  <input type="submit" name="submit" value="sing up!">
</form>
</div>

Any ideas what the CSS should be in order to have this form moved together with the other page elements when the window minimized or maximized?

Answer 1

We can’t see your full code so we can only guess at what the rest of your page looks like.

You probably need to align the background and the form in the same way: Align your background image centrally, or align whatever element it is in to centre, if this is possible.

Alternatively, place the background in the same container element as the form, align that, and have them move together when the window changes.