My code below is trying to split the form into two columns. I want the message field in the right column and everything else in the left. Where am I going wrong? I'm also using code snippets to display the code for tweaking, if this is incorrect please let me know and I will use code blocks instead in the future.
/* Flex container containing child elements */
.container {
display: flex;
flex-direction: column;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
/* First flex child of container */
.col-1 {
width: 50%;
}
/* Second flex child of container */
.col-2 {
width: 50%;
}
label {
display: none;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #ccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stay in place */
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input [type=submit]:hover {
background-color: #45A049;
}
/* Add a background color and some padding around the form */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Flexbox container for the form-->
<div >
<form action="">
<!--Column containing the name, email and subject boxes on the left-->
<div >
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Name:">
<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Email:">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" placeholder="Subject:">
</div>
<!--Column containing the message box on the right-->
<div >
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Message:" style="height: 200px"></textarea>
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>CodePudding user response：
Move your <div > inside the <form>, otherwise, the container only has one single child. You want .col-1 and .col-2 to be direct children of .container.
<form action="">
<div >
<div ></div>
<div ></div>
</div>
</form>
btw, you might want to cleanup your CSS a bit, those width properties in .col-1 and .col-2 are not needed, and also, might want to add a gap style to .container for some breathing, like:
.container {
display: flex;
flex-direction: row;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
gap: 10px;
}
/* So you dont probably don't need these two classes: */
.col-1 {
}
.col-2 {
}
CodePudding user response：
There are two basic errors in your code:
1.) flex-direction: column; needs to be erased to allow the default setting (row) to apply (i.e. the flex children should be in a row, not in a column).
2.) The remaining flexbox settings need to be applied to the form tag, not to .container. The form tag is the direct parent of the two column elements which are your intended flex children. The .container div only contains the form tag as a direct child (i.e. one element), so flex has no effect there.
3.) Not necessary, but better looking: I also added padding-right: 2%; to the left column to create some distance between the form fields.
/* Flex container containing child elements */
.container>form {
display: flex;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
/* First flex child of container */
.col-1 {
width: 50%;
padding-right: 2%;
}
/* Second flex child of container */
.col-2 {
width: 50%;
}
label {
display: none;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #ccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stay in place */
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input [type=submit]:hover {
background-color: #45A049;
}
/* Add a background color and some padding around the form */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Flexbox container for the form-->
<div >
<form action="">
<!--Column containing the name, email and subject boxes on the left-->
<div >
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Name:">
<label for="email">Email:</label>
<input type="text" id="email" name="email" placeholder="Email:">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" placeholder="Subject:">
</div>
<!--Column containing the message box on the right-->
<div >
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Message:" style="height: 200px"></textarea>
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>