Html Question posted in
Some basic documentation can be found here.

Html – 2 flex containers showing side by side

Inside the .maroon section I have two .whitewrap sections. I was wondering why it doesn’t wrap onto another line and displaying them side by side instead. The form should be underneath the text and graphic with some of the maroon showing in between.
I don’t want to add anything in between the .whitewrap sections. Please help.

.maroon {
  background-color: #663333;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.whitewrap {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.padding {
  padding-top: 50px;
  padding-bottom: 50px;
}

.wh {
  width: 80%;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.column {
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  width: 100%;
  display: block;
  height: auto;
}

.whitewrap2 {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
<section class="maroon">
  <section class="whitewrap wh">
    <div class="row">
      <div class="column borderright"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/1f3cbe64-2615-afb7-9979-06694fa51b97.png">
        <p class="text2">Purchase a combination of 1 suit, 1 tie and 1 shirt to recieve $100 off your total.<br><br>Sign up for this offer below on the right. </p>
      </div>
      <div class="column">
        <img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ab2884f4-5505-0c93-941c-bb177eeab689.png">
      </div>
    </div>
  </section>

  <section class="whitewrap2 wh padding">
    <form action="https://facebook.us7.list-manage.com/subscribe/post?u=150448d54e332a15d70ff8ba8&amp;id=a626d63797&amp;f_id=0054d2e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
      <label for="mce-EMAIL">Email Address <span class="asterisk">*</span><br></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""><br><label for="mce-FNAME">First Name </label><br><input type="text" name="FNAME"
        class=" text" id="mce-FNAME" value=""><br><label for="mce-LNAME">Last Name </label><br><input type="text" name="LNAME" class=" text" id="mce-LNAME" value="">
      <br> <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Sign Up">
    </form>
  </section>
</section>
Tags:

3

Answers


  1. 0

    That is because you need to add display: block; or flex-direction: column to the parent container of the 2 forms.

    Your code should be:

    .maroon {
  background-color: #663333;
  display: block;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.whitewrap {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.padding {
  padding-top: 50px;
  padding-bottom: 50px;
}

.wh {
  width: 80%;
}
    <section class="maroon">
  <section class="whitewrap wh">

    <div class="row">
      <div class="column borderright"><img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/1f3cbe64-2615-afb7-9979-06694fa51b97.png">
        <p class="text2">Purchase a combination of 1 suit, 1 tie and 1 shirt to recieve $100 off your total.<br><br>Sign up for this offer below on the right. </p>
      </div>
      <div class="column">
        <img src="https://mcusercontent.com/150448d54e332a15d70ff8ba8/images/ab2884f4-5505-0c93-941c-bb177eeab689.png">

      </div>

    </div>


  </section>

  <section class="whitewrap2 wh padding">

    <form action="https://facebook.us7.list-manage.com/subscribe/post?u=150448d54e332a15d70ff8ba8&amp;id=a626d63797&amp;f_id=0054d2e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">


      <label for="mce-EMAIL">Email Address <span class="asterisk">*</span><br></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""><br><label for="mce-FNAME">First Name </label><br><input type="text" name="FNAME"
        class=" text" id="mce-FNAME" value=""><br><label for="mce-LNAME">Last Name </label><br><input type="text" name="LNAME" class=" text" id="mce-LNAME" value="">

      <br> <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Sign Up">

    </form>

  </section>
</section>
    Login or Signup to reply.
  2. 0

    Add style flex-direction: column; to .maroon:)

    Login or Signup to reply.
  3. 0

    That’s because display: flex; naturally arranges its child elements in a row by default. To arrange its children’s one below another, you need to set the parent .maroon to flex-direction: column;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search