Issue with horizontal left aligned form

Question

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>

Answer 1

尝试将clear: both添加到＃form2 CSS中。

Answer 2

我需要您的HTML代码，但我最初的猜测是您的第二个表单需要一个（清除：左；）

Answer 3

Mistakes in you code:

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

Check the modified code and see the result

Issue with horizontal left aligned form

Question

3 answers

solution1
1 2012-10-09 20:03:35

solution2
0 2012-10-09 20:04:39

solution3
0 ACCPTED 2012-10-10 09:48:41

Issue with horizontal left aligned form

Question

3 answers

solution1 1 2012-10-09 20:03:35

solution2 0 2012-10-09 20:04:39

solution3 0 ACCPTED 2012-10-10 09:48:41

solution1
1 2012-10-09 20:03:35

solution2
0 2012-10-09 20:04:39

solution3
0 ACCPTED 2012-10-10 09:48:41