1

I'm trying to extend the width of my email input field but when I go beyond 60% the subscribe button snaps onto the next line.

Q. How can I increase the width of the input field beyond 60% whilst keeping the subscribe button on the same line and keeping the whole thing centered?

enter image description here

  #mcinputform-front {
  height: 50px;
  width: 60%;
  border-radius: 0px;
}

#button-front {
  height: 50px;
  text-transform: uppercase;
  background-color: #2B9FB7!important;
  color: white!important;
  font-weight: bold;
  border-radius: 0px!important;
  border-color: #2B9FB7!important;
}

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}

home-banner {
  width: 100%;
  float: left;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/young-people-with-no-money-worries.jpg) no-repeat scroll center top / 100% auto;
  height: 657px;
  padding: 48px 0;
}

.wrapper {
  max-width: 1240px;
  margin: 0 auto;
}

.greenpromobox {
  margin-top: 5%;
  max-width: 740px;
  border-radius: 5px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
<div class="home-banner">
  <div class="wrapper">
    <div class="greenpromobox">
      <div class="Startnow">
        <form>
          <center>
            <div class="input-group">
              <input type="email" name="EMAIL" class="form-control" id="mcinputform-front">
              <button id="button-front" type="submit" value="Subscribe" name="subscribe">Sign me up!</button>
          </center>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Live link: https://www.moneynest.co.uk

1
  • Don't use <center>
    – j08691
    Feb 21, 2018 at 16:10

3 Answers 3

2

You can use flex on the input group instead of table:

.input-group {
  position: relative;
  display: flex;
  width: 60%;
  /* total width of the input holder change to suit your need */
  margin: auto;
  /* centre the stuff */
}

.form-control {
  flex-grow: 1;
  /* make your input grow to the rest of the input group div, leaves your button to take up the space you style it to take */
}
<div class="input-group">
  <input type="email" name="EMAIL" class="form-control" id="mcinputform-front">
  <button id="button-front" type="submit" value="Subscribe" name="subscribe">Sign me up!</button>
</div>

NB center tag is obsolete and should not be used

2
  • Thanks Pete, that's great. I heard Google used Center tag and browsers continue to support (plus I find it quicker!). Feb 21, 2018 at 16:34
  • @SamJefferies you're welcome. Browsers may still support the center tag but as it is obsolete, they could pull that support at any moment which is why you shouldn't really use it - it may mean your code suddenly stops working. developer.mozilla.org/en-US/docs/Web/HTML/Element/center. I very much doubt google would use it as they are all about standards
    – Pete
    Feb 21, 2018 at 16:38
1

Increase .input-group's (the parent's) width :

#mcinputform-front {
  height: 50px;
  width: 60%;
  border-radius: 0px;
}

#button-front {
  height: 50px;
  text-transform: uppercase;
  background-color: #2B9FB7!important;
  color: white!important;
  font-weight: bold;
  border-radius: 0px!important;
  border-color: #2B9FB7!important;
}

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
  width: 100%; /* <------ here */
}

home-banner {
  width: 100%;
  float: left;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/young-people-with-no-money-worries.jpg) no-repeat scroll center top / 100% auto;
  height: 657px;
  padding: 48px 0;
}

.wrapper {
  max-width: 1240px;
  margin: 0 auto;
}

.greenpromobox {
  margin-top: 5%;
  max-width: 740px;
  border-radius: 5px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
<div class="home-banner">
  <div class="wrapper">
    <div class="greenpromobox">
      <div class="Startnow">
        <form>
          <center>
            <div class="input-group">
              <input type="email" name="EMAIL" class="form-control" id="mcinputform-front">
              <button id="button-front" type="submit" value="Subscribe" name="subscribe">Sign me up!</button>
          </center>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Personally I'd do that with Flexbox, much easier and much more robust :

#mcinputform-front {
  height: 50px;
  width: 60%;
  border-radius: 0px;
}

#button-front {
  height: 50px;
  text-transform: uppercase;
  background-color: #2B9FB7!important;
  color: white!important;
  font-weight: bold;
  border-radius: 0px!important;
  border-color: #2B9FB7!important;
}

.input-group {
  position: relative;
  border-collapse: separate;
  
  border: blue dashed 1px;
  
  width: 100%; /* <------ here */
  display: flex; /* <------ here */
  align-items: center; /* <------ here */
}
.input-group input {
   flex-grow: 1; /* <------ here */
}



home-banner {
  width: 100%;
  float: left;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/young-people-with-no-money-worries.jpg) no-repeat scroll center top / 100% auto;
  height: 657px;
  padding: 48px 0;
}

.wrapper {
  max-width: 1240px;
  margin: 0 auto;
}

.greenpromobox {
  margin-top: 5%;
  max-width: 740px;
  border-radius: 5px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
<div class="home-banner">
  <div class="wrapper">
    <div class="greenpromobox">
      <div class="Startnow">
        <form>
          <center>
            <div class="input-group">
              <input type="email" name="EMAIL" class="form-control" id="mcinputform-front">
              <button id="button-front" type="submit" value="Subscribe" name="subscribe">Sign me up!</button>
          </center>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

0

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}

#mcinputform-front {
  height: 50px;
  width: 60%;
  border-radius: 0px;
}

#button-front {
  position:absolute;
  height: 56px;
  text-transform: uppercase;
  background-color: #2B9FB7!important;
  color: white!important;
  font-weight: bold;
  border-radius: 0px!important;
  border-color: #2B9FB7!important;
}

.home-banner {
  width: 100%;
  float: left;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/young-people-with-no-money-worries.jpg) no-repeat scroll center top / 100% auto;
  height: 657px;
  padding: 48px 0;
}

.wrapper {
  max-width: 1240px;
  margin: 0 auto;
}

.greenpromobox {
  margin-top: 5%;
  max-width: 740px;
  border-radius: 5px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
<div class="home-banner">
  <div class="wrapper">
    <div class="greenpromobox">
      <div class="Startnow">
        <form>
          <center>
            <div class="input-group">
              <input type="email" name="EMAIL" class="form-control" id="mcinputform-front">
              <button id="button-front" type="submit" value="Subscribe" name="subscribe">Sign me up!</button>
          </div>          
          </center>
        </form>
      </div>
    </div>
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.