Title: Aligning button and input box inline
Last modified: August 21, 2016

---

# Aligning button and input box inline

 *  Resolved [jennybhatt](https://wordpress.org/support/users/jennybhatt/)
 * (@jennybhatt)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/aligning-button-and-input-box-inline/)
 * Would appreciate any help with this, folks.
 * I think there should be an easy fix for this, but I cannot figure it out.
 * Link: [http://storyacious.com/storyacious-practices-on-writing-vignettes/](http://storyacious.com/storyacious-practices-on-writing-vignettes/)
 * At the bottom of the post, I have a widget with a subscribe form. I need the 
   subscribe button to be inline with the email address input box. I’ve tried all
   kinds of things and spent the entire morning googling but cannot find a simple
   workable solution.
 * My HTML and CSS codes are below.
 * _[ Moderator note: please wrap code in [backticks or use the code button](http://codex.wordpress.org/Forum_Welcome#Posting_Code).]_
 *     ```
       /* optin2 HTML */
       <div id="optin2">
       <form action="http://storyacious.us6.list-manage.com/subscribe/post?u=16b93bbd03566c7becc6bd172&id=b534f6c526" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
       <input type="email" SIZE="15" value="Type email address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
       <div id="mce-responses" class="clear">
       <div class="response" id="mce-error-response" style="display:none"></div>
       <div class="response" id="mce-success-response" style="display:none"></div>
       </div>
       <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
       </form>
       </div>
       /* End optin2 HTML */
   
       /* optin2 CSS */
       #optin2 {
       background: #6c6c6c url(wp-content/uploads/mc-images/gloss.png) no-repeat bottom center;
       border-bottom: 25px solid #6c6c6c;
       color: #fff;
       padding: 10px 15px 20px;
       text-shadow: 1px 1px #111;
       }
   
       #optin2 input {
       border: 1px solid #585858;
       font-size: 13px;
       margin-bottom: 10px;
       padding: 8px 5px;
       border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       box-shadow: 0 2px 2px #5a5a5a;
       -moz-box-shadow: 0 2px 2px #5a5a5a;
       -webkit-box-shadow: 0 2px 2px #5a5a5a;
       width: 40%;
       float: left;
       }
   
       #optin2 input.email {
           background: #ffffff;
           padding-left: 15px;
       }
   
       #optin2 input[type="submit"] {
       background: #f6640e url(wp-content/uploads/mc-images/orange.png) repeat-x top;
       border: none;
       color: #fff;
       cursor: pointer;
       font-size: 12px;
       font-weight: bold;
       padding: 8px 0;
       text-shadow: none;
       text-transform: uppercase;
       width: 20%;
       margin-top: 5px;
       margin-left: 5px;
       }
   
       #optin2 input[type="submit"]:hover {
           color: #ffdeb3
       }
       /* End optin2 CSS */
       ```
   

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [wpfan1000](https://wordpress.org/support/users/wpfan1000/)
 * (@wpfan1000)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/aligning-button-and-input-box-inline/#post-4209840)
 * Hi, try this:
 * In:
 * _[ Moderator note: please wrap code in [backticks or use the code button](http://codex.wordpress.org/Forum_Welcome#Posting_Code).]_
 *     ```
       #optin2 input[type="submit"] {
   
       }
       ```
   
 * Add:
 *     ```
       float: right;
       ```
   
 *  [graphical_force](https://wordpress.org/support/users/graphical_force/)
 * (@graphical_force)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/aligning-button-and-input-box-inline/#post-4209843)
 * You also will have to add this along with the code above:
 *     ```
       #optin2 input {
       border: 1px solid #585858;
       font-size: 13px;
       margin-bottom: -31px;
       padding: 8px 5px;
       border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       box-shadow: 0 2px 2px #5a5a5a;
       -moz-box-shadow: 0 2px 2px #5a5a5a;
       -webkit-box-shadow: 0 2px 2px #5a5a5a;
       width: 40%;
       float: left;
       }
       ```
   
 * The key is to change margin-bottom.
 *  [wpfan1000](https://wordpress.org/support/users/wpfan1000/)
 * (@wpfan1000)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/aligning-button-and-input-box-inline/#post-4209845)
 * LOL I have tried 2 different things already and the above does not quite work.
   I deleted my first suggestions.
 * (I can edit your css on my local computer)
 * But I found what does work:
 * In
 * [http://storyacious.com/wp-content/themes/gridiculous-pro/style.css?ver=3.6.1](http://storyacious.com/wp-content/themes/gridiculous-pro/style.css?ver=3.6.1)
 * on line 101
 * change to:
 * _[ Moderator note: please wrap code in [backticks or use the code button](http://codex.wordpress.org/Forum_Welcome#Posting_Code).]_
 *     ```
       .clear {
           clear: none;
       }
       ```
   
 * However, this will change the css for all divs that use clear though on the whole
   site which is not good.
 * So you will need to add some css that affects only the clear in that div.
 * The div is:
 *     ```
       <div id="mce-responses" class="clear">
       ```
   
 * and is under:
 *     ```
       <div id="optin2">
       ```
   
 * So the css needs to be something like:
 *     ```
       #optin2 .clear {
           clear: none;
       }
       ```
   
 * This seems to work as far as I can test on my local computer.
 * Note that you need to add this, not change any existing css.
 *  Thread Starter [jennybhatt](https://wordpress.org/support/users/jennybhatt/)
 * (@jennybhatt)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/aligning-button-and-input-box-inline/#post-4209848)
 * Thank you, wpfan1000 and graphical_force.
 * I tried the last option from wpfan1000 of adding the following to my custom css:
 *     ```
       #optin2 .clear {
       clear: none;
       }
       ```
   
 * That seems to have done the trick.
 * But, I’m going to save the other option from you, graphical_force, just in case
   I need it.
 * Thank you both so much for the help. I can’t believe that I spent the entire 
   morning on this.
 *  [wpfan1000](https://wordpress.org/support/users/wpfan1000/)
 * (@wpfan1000)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/aligning-button-and-input-box-inline/#post-4209849)
 * Hey, glad it worked! 🙂
 *  [wpfan1000](https://wordpress.org/support/users/wpfan1000/)
 * (@wpfan1000)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/aligning-button-and-input-box-inline/#post-4209850)
 * Dear moderator (not sure of your name)
 * I have tried putting code in backticks and it dont seem to work for me.
 * Trying again:
 *     ```
       code
       ```
   
 * Edit:
    Ok LOL now it works, I see you put each backtick on a separate line, maybe
   that is what I did not do correctly in the past….

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Aligning button and input box inline’ is closed to new replies.

## Tags

 * [forms](https://wordpress.org/support/topic-tag/forms/)
 * [inline display](https://wordpress.org/support/topic-tag/inline-display/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 6 replies
 * 3 participants
 * Last reply from: [wpfan1000](https://wordpress.org/support/users/wpfan1000/)
 * Last activity: [12 years, 7 months ago](https://wordpress.org/support/topic/aligning-button-and-input-box-inline/#post-4209850)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics