@gnagy @Satwik Nadkarny I appreciate the help you both provided, and I wish I could give a plus to your responses (requires 15 rep sadly), but I have encountered another issue.
After the first two text input fields, I added an additional input field for email and password. Despite using the same CSS as the text input fields, they seem to be overwritten by a CSS layout, as the margin effect is not working (the email and password forms are too close to each other).
Do you have any insights into what might be causing this?
Please refer to the image for better clarity:
Thank you in advance!
--original post-- In my code, I have created a form with two input fields so far. These fields, however, are aligning next to each other when I actually want them to be stacked on top of each other, but I can't seem to achieve this.
Here is the code for my form:
<div id="wrapper">
<div id="register_wrapper">
<h1>Registreren</h1>
<form class="registratie_form" id ="register-form" action="register.php" method="post" novalidate="novalidate" >
<input type="text" id="voornaam" name="voornaam" required placeholder="Your first name" maxlenght='50' pattern="[A-Za-z]{2,}">
<input type="text" id="achternaam" name="achternaam" required placeholder="Your last name" maxlenght='50' pattern="[A-Za-z]{4,}">
</form>
</div>
The CSS code:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 1600px;
height: 799px;
}
#register_wrapper {
margin-right: 0;
margin-left: 0;
width: 700px;
height: 600px;
clear: both;
position: relative;
float: right;
}
.registratie_form input:focus:invalid, .registratie_form textarea:focus:invalid {
background: #fff no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
.registratie_form input:required:valid, .registratie_form textarea:required:valid {
background: #fff no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
#voornaam{
font-size: 1em;
outline: none;
padding: 0.5em;
border-radius:10px;
width: 280px;
position: relative;
}
#voornaam::-webkit-input-placeholder { font-style: italic; }
#voornaam::-moz-placeholder { font-style: italic; }
#voornaam::-ms-input-placeholder { font-style: italic; }
#achternaam{
font-size: 1em;
outline: none;
padding: 0.5em;
border-radius:10px;
width: 280px;
position: relative;
}
#achternaam::-webkit-input-placeholder { font-style: italic; }
#achternaam::-moz-placeholder { font-style: italic; }
#achternaam::-ms-input-placeholder { font-style: italic; }
I spent a considerable amount of time contemplating how to articulate this question and provided a fiddle with all the code in case the non-registration related code is pertinent to the issue:
As shown in the fiddle, the register form with the input fields "voornaam" and "achternaam" (apologies for the Dutch language being used) are positioned adjacent to each other. However, I aim to have them vertically aligned, not horizontally. The register form is enclosed in the register_wrapper. I attempted to have both input fields align to the left of this wrapper by using float, but it seems that float could be preventing them from aligning vertically. I even removed the float property, but they still remain next to each other.
I tried removing all non-registration related code in my fiddle, and strangely, the fields aligned vertically (one completely to the left and another a few pixels to the right - which is rather odd). However, removing the CSS in my working document and testing it on the web did not yield the same result. The fields still align horizontally despite the changes.
There are several peculiar occurrences, and I am unsure of what is causing this problem. So, to reiterate the main question: how can I get my two register input fields to align vertically rather than horizontally as shown in the fiddle I posted.
Thank you all in advance and please excuse my subpar English, as it is not my native language, as you may have noticed:)