Currently, I am working on designing a user registration page for a testing application and facing some challenges with the layout. CSS has never been my strong suit, but I can manage to style most of the elements except for one - the birthday field. My form design is simple and nothing extravagant.
After trying several approaches, including using tables to structure the input fields, I realized that the day, month, and year fields tend to align incorrectly or disrupt the overall layout. Despite my attempts to control their size and alignment, they always end up causing issues.
I'm avoiding JavaScript or the date field type as they have compatibility limitations across different browsers. Instead, I am opting for a flexible width approach where the user can adjust the page according to their preference.
If anyone could provide guidance or suggestions on how to achieve the desired layout without compromising alignment and spacing, I would greatly appreciate it. Thank you for your assistance.
EDIT
In the system I'm working on (Java EE), I've simplified the code to only HTML and CSS for clarity:
HTML:
<div class="folha">
<table>
<tr>
<td>SEX</td>
<td>BIRTHDAY</td>
</tr>
<tr>
<td><input type="text" name="sex" placeholder="sex"/></td>
<td id="date">
<input type="text" name="day" placeholder="day"/>
<span>/</span>
<input type="text" name="month" placeholder="month"/>
<span>/</span>
<input type="text" name="year" placeholder="year"/>
</td>
</tr>
</table>
</div>
CSS:
.folha table,
.folha td
{
border: 1px black solid;
}
.folha table
{
width: 92.5%;
margin: 0px auto;
border-spacing: 60px 0px;
}
.folha table input[type="text"]
{
width: 100%;
height: 30px;
text-align: center;
border: 1px red solid;
}
.folha table tr:nth-child(odd) td
{
padding: 16px 0px;
}
.folha #date input
{
width: 20%;
}
Despite these efforts, achieving the desired alignment as shown in the first image remains a challenge for me. As someone still learning CSS, any alternative suggestions on how to tackle this issue are welcomed.