p {
font-size: 150%;
}
body {
background-image: url("images/gg.jpg");
background-repeat: repeat;
}
.rTable {
display: block;
margin-top: 100px;
margin-bottom: 200px;
margin-right: 200px;
margin-left: 450px;
}
.rTableHeading,
.rTableBody,
.rTableFoot,
.rTableRow {
clear: both;
}
.rTableHead,
.rTableFoot {
background-color: white;
font-weight: bold;
}
.rTableHead {
background-color: white;
border: 1px solid #999999;
float: left;
height: 17px;
overflow: hidden;
padding: 3px 1.8%;
width: 36%;
}
.rTable:after {
display: table-cell;
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.rTableHeads {
background-color: white;
border: 1px solid #999999;
float: left;
height: 20px;
padding: 3px 1.8%;
width: 55%;
}
.rTableCell {
background-color: white;
border: 1px solid #999999;
float: left;
height: 17px;
overflow: hidden;
padding: 3px 1.8%;
width: 15%;
}
.rTableCells {
background-color: white;
border: 1px solid #999999;
float: left;
height: 60px;
overflow: hidden;
padding: 3px 1.8%;
width: 15%;
}
.rTableHea {
background-color: white;
border: 1px solid #999999;
float: left;
height: 60px;
overflow: hidden;
padding: 3px 1.8%;
width: 36%;
}
.rTables {
background-color: white;
border: 1px solid #999999;
float: left;
height: 50px;
overflow: hidden;
padding: 3px 1.8%;
width: 15%;
}<!DOCTYPE html>
<html>
<head>
<title>hey contact </title>
</head>
<body>
<p style="text-align: center">
<a href="index.html">index</a>
<a href="about.html">about</a>
<a href="media.html">media</a>
<a href="contact.html">contact</a>
</p>
<div class="rTable">
<div class="rTableRow">
<form>
<div class="rTableHeads" align="center"><strong>Contact me</strong></div>
</div>
<div class="rTableRow">
<div class="rTableCell"> <label for="Name">Name:</label></div>
<!--label
is to lable name -->
<div class="rTableHead">
<input type="Name" class="form-control" id="name" placeholder="Enter
name" name="name">
</div>
<!--placeholder let the enter name comment come out -->
</div>
<div class="rTableRow">
<div class="rTableCell"><label for="Email">Email_address:</label>
</div>
<div class="rTableHead">
<input type="email" class="form-control" id="email" placeholder="Enter
email" email="email">
</div>
</div>
<div class="rTableRow">
<div class="rTableCell">Subject :
</div>
<div class="rTableHead"> <select name="subject">
<option value="webt">Web Design</option>
<option value="programming">programming</option>
<option value="data">Data management</option>
<option value="math">Math</option>
<option value="MPU">MPU</option>
</select>
</div>
</div>
<div class="rTableRow">
<div class="rTableCells">Message :
</div>
<div class="rTableHea">
<textarea name="comment" rows="5" cols="30">
</textarea>
</div>
</div>
<div class="rTables" align="center"> </div>
<div class="custom-row"></div>
<!--<div class="rTableHeads" align="center"><strong>Contact me</strong>
</div> -->
</form>
</div>
</body>
</html>I have encountered an issue while trying to add another row below the message section in my HTML code. It seems that the new row is not being displayed as expected. Can someone provide assistance with resolving this problem?
Here is a link to see the output: https://i.sstatic.net/SMv0O.png
I am unsure why I am unable to create a new row below the message section and it appears next to it instead. Could anyone offer insight into why I am facing difficulties in adding a row under the message section?