Utilizing nested flexboxes to create a horizontal row within a vertical column

As I work on creating a mock survey form, I've organized the input fields in a column flex-box layout. However, I'm facing an issue with the name field where I want to split it between 'first' and 'last' names while sharing their horizontal space. I attempted enclosing them in a div with a flex property set to row, but it appears that the parent flexbox is overriding this configuration, keeping them stacked vertically. How can I align the name input fields side by side?

<html>
  <header>
    Survey Form
  </header>
  <body>
    <div class='container'>
      <div class='form'>
        <div class='inputCon'>
          <div class='name'>Name</div>
          <div class='firstLast'>
          <input
            type='text'
            name='FirstName'
            id='firstname'
            placeholder='Enter your name'
            required>
        </div>
        <input
            type='text'
            name='LastName'
            id='lastname'
            placeholder='Enter your name'
            required>
        </div>
      </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
    </div>
  </body>
</html>

<style>
  html {
  background-color: gray;
}

.container {
  margin: 10px auto 10px auto;
  height: 300px;
  width: 350px;
  display: flex;
  flex-direction: column;
}

body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)),
  url(https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#name{
  width: 100%;
}
.inputCon{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 20 120 20 0;
  width: 100%;
}
.firstLast {
  display: flex;
  flex-direction: row;
}
input{
  width: 100%;
  text-align: center;
}


</style>

Answer №1

The issue you are experiencing is caused by the closing </div> tag immediately following the firstname input field

Answer №2

You mistakenly closed your .firstLast div before the last name option.

<html>
  <header>
    Survey Form
  </header>
  <body>
    <div class='container'>
      <div class='form'>
        <div class='inputCon'>
          <div class='name'>Name</div>
          <div class='firstLast'>
          <input
            type='text'
            name='FirstName'
            id='firstname'
            placeholder='Enter your name'
            required>
        <!-- You closed it here -->
        <input
            type='text'
            name='LastName'
            id='lastname'
            placeholder='Enter your name'
            required>
        </div> <!-- Should close here -->
        </div>
      </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
        <div class='inputCon'>
          <div class='email'>Email</div>
          <input
            type='text'
            name='email'
            id='email'
            placeholder='Enter your email address'
            required>
        </div>
    </div>
  </body>
</html>

<style>
  html {
  background-color: gray;
}

.container {
  margin: 10px auto 10px auto;
  height: 300px;
  width: 350px;
  display: grid;
  //align-items: center;
  justify-content: center;
  background-color: #dddddd
}

body {
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)),
  url(https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#name{
  width: 100%;
}
.inputCon{
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 20 120 20 0;
  width: 100%;
}
.firstLast {
  display: flex;
  flex-direction: row;
}
input{
  width: 100%;
  text-align: center;
}


</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to make my modal appear only when the "New" option is clicked?

Is there a way to make my modal in VueJS open only when I click on the "New" option? <select v-model="input.des" @change="$refs.modalName.openModal()"> <option value="A">A</opt ...

Exploring the internet and its elements through DOM using getElementById

When using Internet Explorer 8, I encountered an issue where the getElementById method does not return DOM elements but plain elements when trying to copy a Div from a parent window to a pop-up. As a result, calling appendChild on those types of items resu ...

Ways to distinguish jquery response apart from using $.post method?

Using jquery $.post method: $.post( 'includes/studiesAjax/addTryb.php', {inputVL: inputVL}, function(res){ $("#container").html(res); } ); The response contains a long html code. I am interested in extracting data from ...

How can I save or export an image file containing HTML content?

Currently, I am working on a project where I am generating dynamic HTML content. My goal is to be able to export or save this HTML content as an image file using PHP, jQuery, and JavaScript (or any other method if applicable). Can anyone help with the im ...

What is the purpose of Firebug adding <tbody> elements to <table> tags?

While analyzing the HTML source code, I noticed that the <tbody> tag is missing. However, when inspecting the code using Firebug in the HTML tab, the <tbody> tag suddenly appears. What could be the reason behind this discrepancy? ...

jQuery - Creating an organized hierarchy list

My website's DOM structure is shown below: <ul> <li id="Browse"> Browse <ul id="browse-one"> </ul> </li> </ul> At the bottom of the page, my jQuery script looks like this: $("#Brow ...

Searching for all classes and IDs in a CSS Stylesheet that include a specific keyword

I am currently working with a premium WordPress theme that has an extensive styles.css file consisting of over 25,000 lines. My goal is to make sitewide changes to the font and main color, and in order to do this effectively, I need to identify all classes ...

Guide on creating a live connection between a slider and a canvas

Currently, I am working on implementing a slider that can dynamically adjust a specific value in the canvas, such as the radius of a circle. Although my code works as intended, I would like the canvas to update in real-time as I move the slider instead of ...

Unable to set the opacity of rc-tooltip to 1

Despite customizing our tooltips with CSS, we are still experiencing an issue where the tooltips appear translucent rather than having an opacity of 1. This is evident in the image provided (with text visible in the background): https://i.sstatic.net/nlM ...

The -webkit-box-reflect effect vanishes during the transition

I need help with this issue: The image loses its reflection during the transition until it returns at the end. Any suggestions are appreciated! Thank you! .specials-box { width: 330px; margin: 50px 0; height: 500px; position: relative; ...

Identify when a click occurs outside specific elements

I've been searching for solutions to address this issue, but so far nothing has worked. Here is the JavaScript code I am using: var specifiedElement = document.getElementById('a'); document.addEventListener('click', function(eve ...

The Mat-paginator is refusing to align to the right edge when scrolling the table horizontally in an Angular application

https://i.sstatic.net/l0cZ4.png Overview: My Angular component features a table with Angular Material's mat-table and paginator. Despite fetching data from a source, the paginator fails to float right when I scroll horizontally. Sample Code: <!- ...

Place two identical DIVs next to each other on the same line with a gap in between

I'm struggling to place two identical divs side by side on the same row, covering the entire width with some space between them. However, using margin impacts both divs due to their shared class, causing the second div to drop below. I've attempt ...

What is hindering the responsiveness of this HTML table?

I recently designed a schedule table that resizes properly in the browser, but when I tried to access it on my mobile phone, it didn't resize correctly. On my phone screen, half of Thursday was cut off due to the horizontal scroll. https://i.sstatic. ...

Can anyone tell me how to retrieve the value of {{org}} in this situation?

<head> <title>My Unique Page</title> </head> <body> <input type="text" ng-model="selectedOrg" ng-show="!isSuperAdmin" readonly /> <select id="nameOrg" ng-model="selectedOrg" ng-cha ...

Limiting keyboard input with a phone number in a gridcolumn tag: A step-by-step guide

I have a query regarding a code line that is used to input a phone number into a designated box. <GridColumn field="phoneNumber" title="Phone Number" editor="text"/> Currently, I am able to enter any text using the key ...

Issues with borders and padding when using Bootstrap collapse in table components

I have a table nested inside another table, with a div surrounding it that has the collapse class from Bootstrap. This allows me to collapse it using the button in the first row. Here are the issues I'm facing: Is it possible to only display the ...

Troubleshooting WordPress 4.4 Image Issues: Understanding the Conflict between Srcset and Bxslider

We have several company websites that use Wordpress along with a Genesis installation, a custom Genesis child theme, and bxslider for image sliders. When we view the slider on Firefox, we notice a responsiveness issue that we believe is caused by the new ...

Steps to bring an image forward on a canvas to enable its onclick function

One of the challenges I'm facing involves an image of a pawn on a board. The image is set up with an onclick function that should trigger an alert when clicked. However, there is a canvas positioned above the image, which is interfering with the funct ...

Creating a visually appealing user interface can be achieved by utilizing HTML/CSS to include bullet points and enumeration numbers in the page

I am looking for a way to display lists in a document with a style similar to the image on the right below: The text content of the list items is formatted like any other <p> and the bullet points are located in the margin. Is there a CSS solution ...