Two divs overlapping

[Claudina61Xy2]

Hello, i need help. i am not very expert in Css.
I have two divs, each divs it is 50% width.

When I add an form into one of the divs, the oner overlapp

Here it is the code:
the html:

 <div class="parent">
      <h2></h2>
      <div class="child child1">
        <h2></h2>


        <h1> Contact Us </h1> 

<form method = "post" action = "sendmail.php" > 

<label for = "name" > Name: </label> <input type = "text" name = "name" id = "name" required> 

<label for = "email" > Email: </label> <input type = "email" name = "email" id = "email" required> 

<label for = "message" > Message: </label> <textarea name = "message" id = "message" required>

</textarea> <button type = ”submit” name = ”submit”> Submit </buton> </form

      </div>

      <div class="child child2">
        <h2></h2>

        <div style="overflow-x: auto">
          <table class="tablita">
            <tr>
              <td><img class="icono" src="icons/Place simbol.svg" /></td>
              <td><p class="texto-icono1"> address  <br>state</br></p></td>
            </tr>

            <tr>
              <td><img class="icono" src="icons/Phone simbol.svg"/></td>
              <td><p class="texto-icono2">xxxxx</p></td>
            </tr>

            <tr>
              <td><img class="icono" src="icons/Email simbol.svg"/></td>
              <td><p class="texto-icono3">email@address.net</p></td>
            </tr>
          </table>
        </div>
        <!-----fin de table ------>
      </div>
    </div>

the CSS;/* tabla */

.tablita{
 display:block;
 position:relative;
 height:300px;
 width:300px;
left:130px;
top:150px;
}

@media only screen and (max-width: 600px) {
  .tablita {

    display:block;
    height:200px;
   
    left:20px;
  }
}

/* fin de tabla */

/*  forma */
body { font-family : Arial, sans-serif; } h1 
{ text-align : center; } 

form { margin : auto; max-width:50%; } 

label { display : block;
 margin-bottom: 10px; } 
input[type = "text"], input[type = "email"], textarea { padding: 10px; 

width: 50%; 
border: 1px solid #ccc;
 border-radius: 4px; 
box-sizing: border-box;
 margin-bottom: 20px; }

 .submit{ 
background-color : #4CAF50; 
color : #fff; 
padding : 10px 20px;
 border : none;
 border-radius : 4px; 
cursor : pointer; }

 button:hover { background-color : #3e8e41}



/* fin de forma */

/*  iconos */


.icono{


  height:50px;
}



  .texto-icono1{
    margin-top:1px;
      
      }
  
  .texto-icono2{
    margin-top:1px;
    margin-left:-60px;
      
      }
  
  .texto-icono3{
    margin-top:5px;
    margin-left:5px;
      
      }
  
  
/* fin de iconos */

/*  2 divs for contact page */


div {
  border-radius: 10px;
  text-align: center;
  height:auto;
  }
  
  h2 {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 10px;
  margin-bottom: 5px;
  }
  
  code {
  padding: 5px 0px;
  }
  
  .parent {
  position: relative;
  background-color: palevioletred;
  width: 90%;
  
  margin: 2vw 3vw 3vw 4vw;
  height: 800px;
  border: 5px dotted $color4;
  }
  
  .child {
  opacity: 0.8;
  height: auto;
  background:;
  border:;
  width: 50%;
  position: absolute;
  top: 0;
  margin-top:50px;
  }
  
  .child1 {
  position:
  left: 0;
  background-color:gray;
  width;50%;
  height:400px;
  }
  
  .child2 {
  width:50%;
  left: 50%;
  background-color: azure;
  height:auto;
  }
  
  /*aca el paren box,  se le coloca un widht y un height/*/
  @media screen and (max-width: 500px) {
  .Parent{
  position: relative;
  width: 90%;
  height:500px;
  }
  
  /*los childs,  se les coloca a todos juntos, un witdth y height */
  
  .child, child1, .child2{
  position: absolute;
  width: 100%;
  height: 440px;
  border-radius: 10px;
  }
  
  /*aca al child segundo y al tercero, se les coloca un top, para que bajen uno debajo del otro */ 
  
  
  .child1 {
  top: 20px;
  background: #6b9080;
  margin-top:-10px;
  }
  .child2 {
    height:auto;
  top: 505px;
  left:0;
  background: #6b9080;
  margin-top:-40px;
  }
  }

[JeremyLT]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[Teller]

Hi @Claudina61Xy2

The position property values set to absolute maybe causing some of the issues.

You also appear to have properties, with no values set for them.

Consider using a validator to check both your html and css.

Happy coding