CODEWITHSUNDEEP
htmlcss
user3674383
user3674383

Reputation: 19

My form is moving with my positioned text?

So I am making a website that will send out newsletters for my business. Everything was going fine until I introduced the subscribe button which is moving the h1 text I positioned. Anyone know whats wrong? In the run code snippet you can clearly see that the text is underneath the form, I want it to be in the center. and it should be because in the css I have specified the center.

Code:

#mc_embed_signup {
  background: #fff;
  clear: right;
  font: 14px Helvetica, Arial, sans-serif;
  width: 4px;
}
h1 {
  color: black;
  text-align: center;
  font-family: "Baskerville Old Face";
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5000;
}
<!DOCTYPE html>
<html>

<head>


  <title>Test.</title>


  <link rel="stylesheet" href="formalize.css" />
  <script src="jquery.js"></script>
  <script src="jquery.formalize.js"></script>



</head>

<body>

  <div id="mc_embed_signup">
    <form action="http://yourdomain.us2.list-manage.com/subscribe/post?u=f2783bcb766c7&id=07b8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
      <input type="text" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
      <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">

    </form>







    <br>
    <br>
    <br>
    <br>
    <br>
    <h1> Receive an interesting email, Weekly. </h1>
    <div align="center">
      <img src="wall.jpg" class="bg">
    </div>
  </div>
</body>

</html>

http://pastebin.com/zJTxi45y

Upvotes: 1

Views: 45

Answers (1)

cssBlaster21895
cssBlaster21895

Reputation: 3710

It's because #mc_embed_signup is 4px width. Try to move h1 outside the div, or make div 100% width of parent element.

Upvotes: 1

Related Questions