/*******************************************************************************/
/* Section 4: Contact Area */
#section4{
width:1903px;
}
#contact_area{
background-color:red;
/* max-width:750px; */
padding-top:80px;
padding-bottom:60px;
width:1903px;
}
.contact_container{
background-color:orange;
margin:0px 576.500px; /* centers the entire column in the center of the contact area section */
padding:0px 15px; /* puts padding around the left/right sides of the container */
max-width:750px;
}
#contact_row_1A{
display:table; /* changes the display property of the row to act as a table */
}
#contact_column_1{
float:left;
}
.contact_content_1A{
text-align:center; /* centers the header and the text */
}
#contact_row_1B{
display:table;
}
#contact_column_2{
float:left;
padding-left:15px;
padding-right:15px;
width:690px; /* makes the width of the column 690px */
}
/* controls the text above the input fields */
#contact_text{
background-color:rgba(242,242,242,0.4); /* adds a transparent background color behind the text */
border-radius:5px; /* rounds the borders around the input fields */
font-size:18px; /* changes the size of the text to 18px */
/* margin-bottom:20px; */
padding:15px 0px;
}
#contact_row_2A{
display:table; /* puts both rows into 1 table */
width:750px; /* controls the size of the row */
}
/* controls the column containing the input fields */
#contact_column_form_left{
float:left; /* puts the 3 input fields on the left */
padding-left:0px; /* makes the column w/ the input fields align with the text above them */ /* when set to 0, the columns stay side by side */
/* padding-right:15px; */
width:50%;
}
#contact_column_form_right{
float:left; /* puts the 3 input fields on the left */
padding-right:0px; /* makes the column w/ the input fields align with the text above them */ /* when set to 0, the columns stay side by side */
width:50%;
}
.form_control{
/* display:block; */
margin-bottom:15px; /* adds margins to the bottoms of the input fields to space then out */
/* width:100%; */
}
#name_input{
background-color:rgba(242,242,242,0.4); /* adds a transparent background color behind the input field */
border:none; /* removes the default border around the input field */
border-radius:4px; /* rounds the borders around the input fields */
padding:6px 12px; /* adds padding inside the input field */
width:100%; /* the width of the input field is the full length of the column it in */
}
#email_input{
background-color:rgba(242,242,242,0.4); /* adds a transparent background color behind the input field */
border:none; /* removes the border around the input field */
border-radius:4px; /* rounds the borders around the input fields */
padding:6px 12px; /* adds padding inside the input field */
width:100%; /* the width of the input field is the full length of the column it in */
}
#subject_input{
background-color:rgba(242,242,242,0.4); /* adds a transparent background color behind the input field */
border:none; /* removes the border around the input field */
border-radius:4px; /* rounds the borders around the input fields */
padding:6px 12px; /* adds padding inside the input field */
width:100%; /* the width of the input field is the full length of the column it in */
}
/* controls the textarea element */
textarea.form_control{
background-color:rgba(242,242,242,0.4);
border:none; /* removes the border around the input field */
border-radius:4px; /* rounds the borders around the input fields */
/* flex-direction:column; */
height:auto;
padding:6px 12px; /* adds padding inside the input field */
width:100%;
}
/* controls the contact form's button */
#contact_btn{
background:#262628; /* colors the button */
border:1px solid #ccc; /* changes the border around the button */
border-radius:10px; /* rounds the default border around the button */
color:#fff; /* colors the text of the button */
/* display:inline-block;*/
font-size:18px; /* changes the size of the font of the button */
/* margin-top:20px; /* adds a margin between the textarea and the button */
padding:10px 30px; /* adds padding between the button's text and its border */
}
.form_control{
width:100%;
}
<div id="section4">
<!-- section -->
<section id="contact_area">
<!-- container -->
<div class="contact_container">
<!-- row 1 -->
<div id="contact_row_1A">
<!-- column -->
<div class="contact_column_1">
<!-- column -->
<div class="contact_content_1A">
<h1>Contact Form</h1>
<!-- row 2 -->
<div id="contact_row_1B">
<!-- column -->
<div id="contact_column_2">
<p id="contact_text">Nunc diam leo, fringilla vulputate elit lobortis, consectetur vestibulum quam. Sed id
<br>
felis ligula. In euismod libero at magna dapibus, in rutrum velit lacinia.
<br>
Etiam a mi quis arcu varius condimentum.</p>
</div>
</div>
</div>
</div>
</div>
<!-- row 2 -->
<div id="contact_row_2A">
<!-- column -->
<div id="contact_column_3">
<!-- form -->
<form class="contact_form" action="#" method="post">
<!-- column -->
<div id="contact_column_form_left">
<!-- form group -->
<div class="form_group">
<!-- input field 1 -->
<input class="form_control" id="name_input" name="name" placeholder="Name" type="name">
<!-- input field 2 -->
<input class="form_control" id="email_input" name="email" placeholder="Email" type="email">
<!-- input field 3 -->
<input class="form_control" id="subject_input" name="subject" placeholder="Subject" type="name">
</div>
</div>
<!-- column -->
<div id="contact_column_form_right">
<!-- form group -->
<div class="form_group">
<!-- textarea -->
<textarea class="form_control" id="comment" name="message" rows="6" placeholder="Your message here..."></textarea>
<button id="contact_btn" type="submit">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
Я создаю этот учебный веб-сайт.
Я выяснил большинство проблем, которые у меня были, но я застрял в текущей проблеме.
В разделе «Контакты» сайта я хочу, чтобы группа полей ввода находилась рядом с текстовой областью. Но они продолжают перекрывать друг друга.
Что я должен сделать, чтобы не дать им перекрываться и сидеть рядом друг с другом в одном и том же div?