Home/ Questions/Q 8652697
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T14:22:05+00:00

I am trying to make a second form beneath my first. The issue is

  • 0

I am trying to make a second form beneath my first. The issue is that I can’t seem to move the second form down. I’ve tried padding and margin in my css. I did it in the .label2 #input2 and the other fields that affect my second form. I can’t seem to include attributes in my css for #form2. I tried adding multiple attributes in my #form2 css but none of it is similar. I referenced it the exact same way as my #form1 (which works) so I am unsure why my padding-top in #form2 does not work.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

* {
 margin:0px;
 padding:0px;
}

body {
 background-image: url(/img/bamboo.png);
 background-repeat:repeat-x;
 background-color:black;
 text-align:center;
}

#container {
 margin:0 auto;
 margin-top:0px;
 width:920px;
 height:920px;
 text-align:left;
 background-color:00000;
}

.twoCol {
 height:55em;
 margin:2%;
 width:46%;
 background-color:0000;
 float:left;
}

#logo {
 margin:0px;
 float:left;
}

#whatis {
 font-family: rockwell;
 text-align:left;
 font-size:1.4em;
 padding-top:2em;
 color:#cccccc;
}

#about {
 font-family: rockwell;
 letter-spacing:.1em;
 line-height:1.3em;
 text-align:left;
 font-size:1.1em;
 padding-top:.2em;
 color:#ffff99;
}

#equal {
 padding-top:1em;
 padding-left: 9em;
}

#signup {
 font-family:rockwell;
 float:left;
 font-size:1.5em;
 padding-top:2em;
 padding-bottom:100px;
 color:#339900;
}

#form1 {
 padding-top:6em;
 width:450px;
}

#form2 {
 width:450px;
}

#formleft {
 float:left;
}

#formright {
 float:right;
}

.label {
display:block;
margin-left:1em;
margin-bottom:-.3em;
font-size:.85em;
color:white;
font-family: Avenir;
text-shadow: px px px white;
}

.label2 {
 margin-top:13px;
 display:block;
 margin-left:0em;
 margin-bottom:0em;
 font-size:1em;
 color:white;
 font-family: Avenir;
 text-shadow: px px px white;
}

input {
 font-family: Courier New;
 font-size: 1em;
 height:1.4em;
 margin:2% 5% 5% 5%;
 width:90%;
 border-color:#555555;
 -webkit-appearance: none;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 5px;
 -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

#input2 {
 font-family: Courier New;
 font-size: 1em;
 height:1.4em;
 margin:-4% 0% 0% 15%;
 width:75%;
 border-color:#555555;
 -webkit-appearance: none;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 5px;
 -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

.inset {
 -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

button {
 height:2em;
 margin:0% 5% 5% 5%;
 width:92%;
 background-color:#00aeff;
 font-size: 1.5em;
 cursor: pointer;
 -webkit-appearance: none;
 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;
 border-color:#008aff;
 -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
 box-shadow: inset 0 3px 12px rgba(0,0,0,.24);
 text-shadow: 1px 1px 5px grey;
}

button:active {
 position: relative;
 top: 1px;
}

.submit input2{
 margin-left: 1em;
}


text{
 font-family: Avenir;
 font-size: 1.5em;
}

</style>
</head>

<body>
 <div id="container">

    <div id="left" class="twoCol">

    <div id="logo"><img src="/img/logo.png" height= "150px" width="257px" alt="">

    <div id="whatis">
      <p>What is Epic Swap?</p></div>

    <div id="about">
      <p>Epic Swap is the opportunity to share<br> an  experience, make a friend and do<br> it all over again.</p></div>

    <div id="equal">
      <img src="/img/equal.png" height="56" width="100" alt=""></div>

    </div>
    </div>


    <div id="right" class="twoCol">
        <form id="form1">
       <div id="formleft"><label class="label">Username:</label>
          <input type="text" /></div>
       <div id="formright"><label class="label">Password:</label>
          <input type="text" /></div>
        <div id="signup">
          <p>Sign Up Now!!</p></div>

        <form id="form2">
           <p><label class="label2" for="name">Name</label2> 
           <input id="input2" type="text" id="name" /></p>

           <p><label class="label2" for="e-mail">E-mail</label2>
           <input id="input2" type="text" id="e-mail" /></p>
           <p class="submit"><input type="submit" value="Submit" /></p>
       </form>
    </div>

 </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Mistakes in you code:

    1. #form1 tag is opened and but it is not closed anywhere
    2. <label> tag has wrong closing that is </label2>
    3. tag closing is not in proper

    Check the modified code and see the result

    • 0