CODEWITHSUNDEEP
htmlcssflexbox
user7778287
user7778287

Reputation: 369

Flexbox nested in flexbox- make a row in a column

I'm making a mock survey form and have put the inputs into a column flex-box, but I want to make the name field split between 'first' and 'last,' and share their horizontal space. I've tried enclosing them in a div and giving that enclosed div the flex property of row, but it seems to be overridden by the parent flexbox, keeping them vertical to each other. How do I put 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>

Upvotes: 0

Views: 234

Answers (2)

Brady Ward
Brady Ward

Reputation: 134

You closed your .firstLast div before the 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>

Upvotes: 0

L1zardK1ng
L1zardK1ng

Reputation: 84

There is a closing </div> tag after the firstname input that's giving you the trouble

Upvotes: 1

Related Questions